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Introduction 


Chapter 1: Line art 


Make smooth line art and learn about shapes, lines and curves. 


Chapter 2: Anti-Aliasing 


Smooth out your outlines and make your shading and curves look softer. 


Chapter 3: Colour 


Create and adjust colour palettes suitable for sprites and backgrounds. 


Chapter 4: Readability 


Improving the clarity of the sprite, big or small. 


Chapter 5: Dithering 


Create different gradients primarily for backgrounds. 


Chapter 6: Game Perspectives 
Build isometric environments and characters and learn about other fixed video-game perspectives. 


Chapter 7: Clean Up 


Refine your pixel work and add final touches. 


Chapter 8: Sub-Pixeling 


Go beyond your single pixel and breathe life into your animation. 


Chapter 9: Animation 
The final step to bring your characters and environments to life. 


Epilogue 
Afterword, Bibliography, Guest artists. 
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What programs do | use? 


You can keep using software you already know or switch to a new one. Some programs do more 
than pixel art, others don't. In the end, it doesn’t matter how advanced or fancy your 
technology is. Even MS Paint does the trick! Check page 14 for some software examples. 
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Why is pixel art different from other pixelated art? 


In pixel art, you have total control and can manipulate every single pixel yourself. 
Advanced tools will not do the job. Of course, that makes your artwork sharper because you 
don't have the soft blur from paintbrushes. However pixel art is not just about the tools. 
Learning techniques is equally as important to get good results and work faster. 


You control the pixels. 


The tools don’t control you. Non-pixel art: 
It doesn’t mean you have to place Doesn't require you to zoom much. 
every single pixel like a brick. Doesn't require pixel-precision. 
Uses brush strokes and pen pressure. 
There are shortcuts. Don’t worry! o . =. 


Pixel art was born from limitations. 


That's why many manual techniques are still used today. 


Technological progress gave new possibilities in 2D games: digitized pictures and photographs, 
pre-rendered 3D models, full motion video and much more. Once sprites stopped being edited 
on pixel level, they were not considered pixel art anymore. They are still sprite objects on 
screen, but not the traditional hand-made pixel-sprites we know of. 


Non-pixel art Oekaki or binary art Pixel art 


Pixel art is often confused with other art mediums such as Oekaki or Binary art. That’s because 
they often use aliased graphics: art made with non smoothing tools. Regular paintbrushes 
smooth your lines. Aliased art keeps everything pixely & sharp. 


Digital art 


Mixed medium Aliased art 


Oekaki Pixel art 


This diagram is a summary. For more info, check the tools on page... 


Koala 
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So where do | start? 


There are multiple ways to start. Let's compare it to something more familiar: drawing & 
painting! The methods aren't all that different from pixel art! You'll see. 


Sketch Line art 


. 7 Gx ‘ 


Vir) <- (Stark V 
¥) : 
_— = BX. 7 
Resize a large sketch. Shade, clean up 
ee. & complete! 
Block shapes Refine 


You can start multiple ways and take different paths. You can even mix paths. If you already 
make illustrations, stick to your method of preference! If you feel adventurous, try 
something new. However, pixel art is usually 1 single layer. 


If you're not comfortable working on 1 single layer, don’t worry; you can still use layers, but 
make sure to combine them so you don't get too dependent. Especially with animation, having 
layers will hinder you more than anything. If you make entire scenes or mock game screenshots, 
layers are necessary though! As a result, this brings pixel art closer to more traditional artwork. 


Pixel art is like 2D sculpting. 
You start with a base, then chisel and add pixels! 


Here are a few examples of the multiple ways to make your sprites/pixelart. 


By Michafrar 


: 


Guest artist: Anubis Jr 


Hardware tools 


Both mouse and tablet are perfectly fine! 


OK! OK! 
A Mouse is good with clicks A Tablet is good with strokes. 
Harder to draw with, Harder to click or tap constantly, 
but offers click precision. but easier for intuitive control. 
Good for clean up and final touches. Good for the sketch/beginnings. 


It doesn’t matter what you use. Remember the saying: 
“It’s not about the tools. It’s how you use them” 


Remember: your keyboard is a powerful tool for art too! 


You can use keyboard shortcuts to make the process faster 
and flip through animation frames. You can also use extra 
buttons on your mouse or tablet, if they have them. 
Sometimes, you can even make your own new shortcuts. 


“Old school” hardware 


Here's a few examples of how sprites were made back in the 80's and 90's. 
They're not all that different from today’s hardware, just more archaic! 


Early video game developers used special tech such as 
tablets with a mouse that had a crosshair. The tablet 
was Calibrated to the screen, unlike a regular mouse. 
These devices were called digitizers and the mouse 
was called a digitizer puck. 


Sprites were roughed out on paper, placed over 
the digitizer and then traced with the puck. 


Capcom artists drew frames on grid paper and pixeled them with digitizers. 
Felicia art by Akira “Akiman’” Yasuda featured in Darkstalkers (1994). 


dr ‘ . 
Pe cane 
1 t L-} DIGITIZER System mM 


) | . 3 
ee ot tt, y ee ———— 


Images from the development of Golden Axe in Mega Drive (1989) 
from the French Magazine “MegaForce #4” January-February 1992. 
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Another peripheral was a digitizer connected to 
a light pen: a screen stylus used to touch the 
surface of screens to recognize the X and Y axis 
of the monitor. 


such as 
the Wacom Cintig, letting you draw directly on 
screen. 


Other developers drew directly on computers with a 
regular mouse and keyboard. Some pixel artists today still 
use this setup. These pictures are from a documentary that 

features Comix Zone (1993-1995) with animator Dean Ruggles. 


Full video: youtu.be/-M8RIc6Ek0Q 


MT TT 
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Screenshots from a 1995 Promotional commercial for Fatal Fury 3 Neo Geo CD (Japan). 


¢ Structural Diagram of Character Development Tool 


*1. RGB 21-pin monitor 


9. Art Box (Character development unit) 


\ 


. SCSI hard drive 


* 3. EP ROM writer 


* 4. Scanner 


From the “Neo-Geo Hardware Specification” booklet, page 93, issued by SNK Playmore Corporation 
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Software & Programs 


As mentioned previously, your tools will not define you as an artist. These programs are there to 
help make the pixel art process easier so you can improve your skills. Each program listed below offers 
their own unique benefits and you may find one program suits your process more than others. 


It’s important to try them out for yourself and see what you enjoy! 


Speciality pixel-art prograr 


Graphicsgale 


Price: 1,995 JPY / $20 
Free version available but no gifs. 


This powerful pixel tool is suitable for animation 
and pixelart. With gamedev friendly tools such 
as tile sets, export options and palette editors; 
this program is quite popular with pixel artists. 
The Customizable layout and hotkeys make 

it very versatile software. Unfortunately, the 
timeline is a bit too simple to do full scenes. It’s 
also great for binary artists with an extensive 
array of customizable brushes. This Japanese 
program is translated and it’s quite cheap too! 
Make sure to try the free version. 


MS Paint XP/Vista 


Price: Free 
This version is not pre-installed on win.7/8/10 


The tool that many beginners and masters have 
used over the past decades. Make sure you use 
the Windows XP or Windows Vista version of 
Paint. Every version after Windows 7 feature 
non-pixelart tools that don't allow you to make 
clean pixelart. 


This software just has the bare minimum, but 


sometimes, that’s all you need. Paint is great to 
start your pixel adventure! 
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by Michafrar 


Aseprite 


Price: 210 3 == a. Frame Select View Help ° a 
Free version available but limited features. CITMEENE fantinero. otis 


This indie developed pixelart software is 
always full of surprises! With frequent updates 
about every month or so, expect this program 
to become quite powerful. It’s cheap, has an 
intuitive animation timeline close to programs 
like Adobe Flash. 


Preview 


Seo Ne HElS/8 3) 


You can easily edit and load colours and even 
access palettes from retro consoles. 
Unfortunately the user interface and layout 
are low resolution and pixelated, but future 
updates may add a different skin. 


aseprite.net 


Promotion 


Price: $78 
Free version available but limited features. 


This tool has grown in popularity after the 
success of the indie game “Shovel Knight” by 
Yacht Club Games. This software is a great way 
to animate sprites. It features an advanced 
onion skin tool and allows you to zoom in up 
to 5000%. It’s quite plug in friendly and allows 
you to customize the layout! The price is 
slightly higher than the other cheap software, 
but look out for sales every now and then. 


General art programs 


Paint tool SAI | 
Price: 5,400 JPY /$50 —= 


Pants eect 


30 day free trial available Pas 


* 
a 
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Shovel Knight (PC) 


This software combines the ability to create —— 
both pixelated and non-pixelated images. It’s 
key features include a hue shift option which 
allows more colour control than pixel 
orientated programs. It also features the ability 
to make smooth 1px lines with the legacy pen 
and stability options, along with an accurate 
wand tool. The program is also tablet user 
friendly. 


SH] O8 OO Ow Ow) « pb}; 


Guest artist: cyanatar 
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GIMP 


Price: Free 
An open source software app 


GIMP is a free drawing software which has the 
ability to also do pixel-art. This immediately 
makes it more accessible than the programs 
listed before, however while free it doesn’t have 
an intuitive interface for pixel-art. 


The program includes a lot of useful tools, 
including customizable grids and transparency 
options. It also has a text tool. Having the option 
to have extensive configurations to suit your 
needs will either be convenient or 
overwhelming, depending on your preferences. 


Adobe Photoshop 


Price: $699+ 
Extremely expensive program! 


Photoshop is well known as the software 
standard for digital art, as well as being the 
most expensive! There are more wallet-friendly 
options thanks to adobe cloud subscriptions 
but if you're tight on a budget it’s still quite 
expensive. 


If you can afford it, the program really does 
everything you could need including pixel 
work. It may lack the precision of dedicated 
software, so if you want to set up pixel art 
tools in the program you may need to read up 
on specific tutorials to get the most out of it. 
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by Michafrar 


Untitled-2 @ 400% (Layer 1, RGB/8)* = 


Guest artist: cyanatar 


Software tools 


Regardless of the software, you will need at least these 4 tools. 
These are the minimum required to make pixelart. 


Pencil tool 


Most basic tool. Some software have a brush. 
It gives you a 1 px tool of crisp and clean pixels. 


Ye ¢ gS fF FF & A 


Eyedropper 


Absorbs a colour. Sometimes assigned to the right click. 
It allows you to pick up colours and make palettes. 


$ #¢ ff £ ~ 2 Ff PB 


Eraser 


Erases your mistakes. Some software don't include it 
because you can just erase with white or transparency. 


a GF & PP rd 


Bucket 


Makes your life easier. It fills an empty area with 1 solid colour. 
Watch out for gaps! Or it will fill the whole screen. 


e+ oD @&% 


DVWOOO 
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Some programs don't include an eraser and group the eyedropper with the brush. 
That gives you 2 tools combining the power of 4! 


al 


Other must-have tools: 


_--- 8 

oO ‘ Jp 
\ ‘ 
ee: tL 
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Db ~ 
Selection tool Recolour tool Line tool 
Use & edit manually: 
—_—--— C ) 
Ye] i, 
toe ee ee 
C) ; 
a 
G—— 
8B —1—. § = 8 
Rotation tool Colour settings Circle tool 
Avoid: 


Blur Brushes 


Blurred gradients 
Why avoid automatic tools? Because the artist can’t predict how the result will turn out 
Remember: Pixel art is about having 100% control over what you do. 


What canvas size? 


“What size do | make my sprites and backgrounds” is a common question. 
Old computer graphics had low resolution, thus pixel art is often small. 
When making pixel art, you will have to decide a canvas size from the very start. 


For more information on sprite sizes, read Chapter 4: Readability 


“| want to make artwork and disple 


Draw however big or small you want your artwork or animation to be. 
A good canvas tends to stick under resolutions of pixelated videogames. 


MS DOS 


Nintendo SDS 
top screen 


Nintendo 3D5 


bottom screen Mie gadrh ve 


Nintendo DS 2% Spectrum 9 Super Nintendo 


iwonderswan|Game B oy 


400x240 256x192 240x160 2444144 160x144 94x64 84x43 32432 320x240) | 256x240 320%224 256x192 
320x240 


“| want to make sprites for a vide 


Make sure to check what ratio is between your sprite and the canvas. 
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Metroid II: Return of Samus (Gameboy) has a LARGE sprite to canvas ratio for a playable character. 
The sprite is 1:24, about 4% of the screen. It’s not very suitable for manoeuvring in level. 


Super Metroid (Super Nintendo) has a LOW sprite to canvas ratio for a playable character. 
The sprite is 1:38, about 2,5% of the screen. It allows for the player to see more of their environment. 


sg 
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Cave Story /Doukutsu Monagatari (PC) has a TINY sprite to canvas ratio for a playable character. The 
sprite is 1:300, about 0.33% of the screen. Characters are still visible but minimalist due its tiny size. 


This may sound obvious to many artists, but when you resize ALWAYS stick to WHOLE NUMBERS. 


06x 1x 1,25%x 1,5x 2X 2,5x 
50% 100% 125% 150% 200% 250% 


» 
« 


Original 


You can resize sprites to any percentage BUT 
you will have to manually fix them to keep it 1x size (100%). 


Even more importantly, NEVER EVER mix different pixel ratios. 


195+ db bo07xX—-SeSOL YE 


Adventure Time: Half-Minute Hero (PSP) 
EtDBIDK! (Various platforms) 


Moving forward... 


This short prologue was just scratching the surface 
on how you can make sprites. 


In the end, there's a method for every type of artist! 


a 


= "teen Clrapiter 
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Introduction 


Line art is the base of your sprite regardless of 
whether you start with shapes, loose sketches or 
no line art at all! It will often be applied at some 
point in the process. 


Consistency is essential. 
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It makes sprites more readable and appealing. 


Prefer thicker lines? Make sure to keep the 
line art clean and easy to follow. Some lines 
however can be thinner than the rest 
of the drawing if the style requires it 


Thin lines are better 


for small areas. 
Bottom L- R SNK v C Card Fighter’s Clash (Neo Geo) 
Pokémon Pinball RS (GBA) 


J © 
x 


Sprites are often small graphics! As a result, you will notice that in games ... 


Most pixel art has 1px line art. 
x! Ww 
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By Michafrar 


Lines and curves 


Ever noticed when drawing a pixel line or curve in 1 stroke, it doesn’t look as smooth as you want? 


Easy! 
process 
| i | | | 
=, os 
Oh no! Much 


better! 


The key thing to remember with jaggies? 
Don’t surround a row of pixels with bigger ones. 


W9-S9-2-1-1-1-2-1-3-2-3-8 Y-3-2-2-1-1-1-1-2-3-4-8 


Importantinote! 


UNAVOIDABLE: So\fixthem! 
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Pixel art lines that have the same “stairs”, staircases with the 
same number of pixels on each step. . . It just looks smoother! 


The steeper the line, the bigger the ‘step’! 


. Ifyou have stairs of TWO, don’t include a ONE. 
Keep your staircase equal and avoid jaggies. 


There’s no need to redraw the lines or 
CTRL+Z every time. 


Remember that you can always use the 

FER selection tool. You can also chisel away 
pixels. Chip away or add pixels so that you 
obtain nice lines! 
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Even when you don't have lines, any shape within your pixel art has an edge. 


Guest artist: Anubis-works 


When 2 pide of colours touch each sale they create 


a line. So, even cell shading creates ’ ~ On smooth 
surfaces, your shading shouldn’ t have j age s either! 


Tuna head from The Guided Fate Paradox (PS3) 


Graphics without any line art, such as Curses ‘N Chaos (PC/PS4), still have clean-looking pixelart. 
It’s quite effective for backgrounds. For more examples, check page 30. 


Pixel-Logic Bonus #1 


No problem 


As I've described, chiselling away at your lines is much more natural than being a perfectionist. 
This works for every issue, and you can see below some examples | did to emphasise that! 


Fixed C { G is O 
Originals =~ f is Ay Za 


Another way to see jaggies is to imagine your pixelart like vector lines! 
So if you're not sure, draw over it and you'll see the mistakes. 


CPCs) 


Jagged... 


LIC co 


Fixed! 


Continuous Paint on Freehand trace algorithm 


 Diucl-perfect [pe 


Pro Motion Aseprite 29 


Pixel perfect Drawing 


The outline is a major attribute that defines a sprite’s style. 


You may have noticed that pixelart comes in many shapes and forms. Like any art! 
Here are the types of outlines | identify: 


No outline sprites are pixels with 


They are usually so! 
and occasionally have shading 
and broken outlines. 


Don’t be fooled; even without 
lines, yo 1 to clean 


aggles: (sorry...) 
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Black inline pixels are sprites with black 
line art that goes inside the sprites too. 


This was very effective in the NES eraasa 


way to circumvent the limitations. Today, It 
makes sprites rather muddy. 


Well, not ALL sprites...! : 


S| 
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With black contouring, only the contour has a black 
outline, but the inside is completely coloured with 
little to no black. It helps your sprite stand out from 
backgrounds and look clean! 


It’s the style that is used commonly today with sprites, 
and is very popular with modern handheld games. 


Anti-Aliasing 


The outline is coloured according to the colour 
it surrounds. Every part of an object has its own 
coloured outline. 


The outline of a block will be the darkest 
shade of the inner block. 


Selective outline 


Selective outline is line art that is shaded with a light source! It’s the most 
common type of outline in pixel art, and works great with backgrounds. 


Metroid: Zero Mission (GBA) 


It blends perfectly with the environment. 
34 Light or dark background, it doesn’t matter! 


Pokémon sprites from the Gameboy 
Advance up to the Nintendo DS 
feature selective outline. They're 
timeless. The colourful outline 
makes them so great. 


Go study them. 


It may be hard to see the outline 
fully without zooming in or with 
inner colour. Let’s remove 
everything but the outline. 


It's super effective! 


It’s now obvious that: 


1) The line art is clearly shaded. 


2) The light source is visible. 
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Conclusion 


Here's a summary of the different types of outlines, different outlines can completely 
change the style of a sprite! Regardless of what technique you use, 
line art will be applied at any stage of the process. 


ne outline Selon colour 


¢ 


black out = black in 


Food for thought Types of Outlines 


Introduction No Outline 
Lines & Curves Black Inline 
Lines Are Everywhere Black Contour 


Coloured Outlines 
Selective Outlines 


S)/ 


Anti-Aliasing 


A picture is worth a thousand words. So for the 


is & 


Aliased Anti-aliased 


Anti-aliasing helps you smooth out edges . Pay attention to 
where these little blocks are: they usually dark areas with light areas. They're sometimes 
found between 2 shades too, highlights from shadows! 


Starfox 2 (SNES, unpublished) 


e\.) 


To AA or not to AA? 


One is not better than the other, but anti-aliasing is of utmost importance for pixelart. 


Should | use anti-aliasing or not? Is it worth my time? Let's have a case by case study. 


with anti-aliasing no anti-aliasing 


A custom pixel art of Nintendo’s Metaknight. | originally created this with anti-aliasing. 
However, when removing all anti-aliasing, the picture didn’t lose much quality. It’s hard to tell 
the difference. AA is just icing on the cake here. 


original graphics extra anti-aliasing 


Three sprites from Scribblenauts (NDS). The kangaroo in the original already had anti-aliasing. 
Can you tell the difference? It’s hardly noticeable. These sprites don’t benefit from anti-aliasing. 
The style of the game is relatively simple, so anti-aliasing is hardly necessary. 
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original graphics no anti-aliasing 


A King Dedede sprite from Kirby Super Star Ultra (NDS) . This is where the lack of anti-aliasing 
becomes painfully noticeable. This style is all about soft and smooth shapes. Without 
anti-aliasing, all detail is lost. 


original graphics no anti-aliasing 


An Unown from Pokémon Crystal (GBC) . The sprite without AA feels blocky. The original graphics 
had an abundance of AA. In the game, the sprite was displayed on a white background. Since 
sprites could have a total of 4 colours, they maximized AA. The black sprite without AA 
feels harsh on a pure white background. 


original graphics no anti-aliasing 


Portrait from Fatal Fury 2 (GB). Removing the AA makes the sprite more readable, but at a cost: 
there's less detail. To get the most out of a gameboy palette, it’s best to add AA. 


Al 


42 


Gee 


original graphics anti-aliased 


Objects from Rhythm Heaven/Paradise (NDS). Most of the graphics in this game are entirely 
aliased, sharp, and jagged. This was done to mimic Ko Takeuchi’s art style. However, by adding 
Slight AA the sprites have a softer look. 


L: Original graphics R: Extra anti-aliasing 


Portraits from Metal Gear: Ghost Babel (GBC). Here, the difference is only noticeable when 
zoomed in. When these portraits are displayed at a small resolution, you can barely tell the 
difference. The shapes are clean enough to have minimal anti-aliasing. 


4 1 
—= | eo I 


original graphics no anti-aliasing 


Fuka Kazamatsuri from Disgaea 4 (PS3). These sprites are scaled down drawings that have been 
touched up by pixel artists. If you remove all the AA, there is little difference. Colours with low 
contrast don’t need much AA. Nonetheless as this was displayed in HD resolution on a 
Playstation 3, smooth anti-aliasing is a must. 


original graphics no anti-aliasing 
Advance Wars (GBA). As with Disgaea, this art was down-scaled and touched up manually to fit 


its limitations. They used AA to preserve the detail of the original art. Without it, it’s just 
a pixely mess. 


original graphics with anti-aliasing 


SMW2: Yoshi's island (SNES). Yikes! The game's art style was clearly going for a crayon look. This 
sprites therefore need to be crisp and sharp. Anti-aliasing makes it worse. 


Conclusion 


Anti-Aliased 


Aliased 


us 
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Guest writer: 


TuyoART.Tumblr.com 


Clarity 

Characters, faces and eyes usually 
draw people's attention. It’s best 
to make them clear, recognizable 
and easy to read. 


et | High contrast 


\ If you have 2 highly contrasting 
colours, try blending them 
using some intermediary pixels. 


A4 


Temmie’s work focuses on smooth and easy to 
read line work. Although there seems to be 
little anti-aliasing at first glance, she uses it 
quite strategically. 


Anti-Aliasing is used to 


k Detail 
. \ This area contains a lot of small 


i curves. Smaller curves are often 
more jagged. It requires more 
AA than bigger curves. 


Line weight 

Anti-aliasing is used to add or 
remove some line weight. By 
adding AA, you can make things 
look thicker or thinner. 


How to apply 


AA is simply putting pixels in little corners to make lines and shapes smoother. 


It's kind of like cushions on a couch! 


Li, 


( 
“Tanks for Filling Hhe g*P 


These examples should help you identify good AA from bad AA. 


They range from simple to complex. 


+o Ee 
ve Bea 
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How many blocks do | add? 


About half of the length of the line. Too little is better than 
too much. 


How many shades do | use? 

One to start practicing. 

Two for smoother results. 

Three if you have enough colours and feel confident. 


Note: too much AA blurs the line between pixel art and vector art 


Which corners do | fill? 
The following pages will show you some techniques to help you! 


| recommend a mix 
of 1 and 2 shades. Go 
look up some of your 
favourite sprites that 
have AA. Try and see 


how they doit. See 
what suits YOU 
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Below are some examples of . They're rare for small sprites, but are more common 
with larger pixel art. If you're not happy with the aliased look, you can still add AA. 


Darkstalkers 3 (Arcade/PS1) 


. Longer AA isn't always necessary. | | | 
| 
You can have shorter blocks. It’s completely up to you! hd, 


Although drawings are not pixel art, they’re technically made 
up of pixels on a screen. The technical term for this is raster 
graphic images, or in simple English: “images on a pixel grid”. 


Let's zoom in on a flat curve that is very horizontal. 
We'll then compare it to a line that is more diagonal. 


Hat in Time (PC) 


Notice how the steeper the curve, the less colours there are. 


Of course, for pixel art, it would be too blurry with too many colours. It wouldn't resemble 
traditional pixel art anymore, it would resemble a regular image instead. 


Longer steps = More shades of AA 


i 
a 
a * ee 
a  * 
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but there are exceptions! Here, NES limitations 
showcase the lack of AA nicely. With , there is little to 


2 C® 


Kirby’s Adventure (NES) 


Sprites with more colours, offer more variety: 


Mega Man Battle Chip Challenge (GBA) Kirby’s Super Star Ultra (3DS) 
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Convex curve 


The centre has light colours. 


The ends have dark colours. 


ra os 
¢ rN 


outline) Wr AOloutline) 


Concave curve 


The centre has dark colours. 


The ends have light colours. 


Darker or lighter pixels change the weight of the 45° part. 
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Pixel-Logic Bonus #2 
Still unsure how to make a 45° line slightly curve? 
Here is an example ofa <) 97) 0) fi 


The following curve is from the red frame featured on this sprite. 
It’s an outline, but it could easily be blended with a background. 


colouring the outline + anti-aliasing 


the lighter pixels curve the lighter pixels curve 
; : the edge of the 45° line the edge of the 45° line 
to obtain a nicer curve 


+) the darker ones creates 
the tip of the curve 


rounding off the edges 


#2 
better! 


Jagged lines 


What to do with a naturally jagged line? They are rare, but exist nonetheless. Try this trick. 


la}iagged| shape) | 


Wish to stop there? Fine, the line is smooth enough. 
Want to go even smoother? Try this. 


fillfinjthe) 
biggest/gaps|! 


Smallerigaps 7 


imore 2gsure) 
Iighieryester it sfonlyoptional butfdonitfoverdo, 


This works for other types of jagged lines! 


Iniagmiotintadasgin/  tinitratim x ‘pom eneny 


©) | 


% 


Maho Sensei Negima! Private Lesson 2 (GBA) 


Darkstalkers 3 (Arcade/PS1) 
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Line weight 


Manipulating colours can help you make lines look thicker or thinner, even at 1 px! 
Mouths usually tend to be just a simple line. So let’s take mouths as an example! 


Breath of Fire IV (PS1) 


Dimples are [[gix; lips are dark. 


Dimples are dark and appear thicker. 


Look! What feels thicker or thinner? 


DARK = THICKER 
(Ueiiiy' = THINNER 


You can even add lighter lines on the tip of a curve to recreate brushstrokes 
(see orange and cyan examples) 
Just play around, but don’t use too many shades! 
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Observe the lines on the following sprites. Focus on their faces. 
By adding more anti aliasing, lines appear thicker. 
Less anti aliasing makes lines sharper and thinner. 


Disgaea 4, Disgaea D:2 (PS3) 


Look how easily a line can become thicker or thinner. 
The colours and the pixel placements make all the difference! 
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__when blurred~, 


= = 
ee 
i 
i 


There’s no point overdoing AA. You can get 
the same result with less effort. In the example 
on the right, the blurred side is almost identical 
in all stages. So there's no need to overdo AA. 
Just stick to 1 or 2 colours. 


Line weight is complex. It’s the basis of sub-pixel 
animation. This will continued in the chapter: 
“Sub-pixeling’. 


This happens when two rows of pixels perfectly hug each other. Sounds cute, but it really isn’t! 
They are the same length and 


Little Nemo: Dream Master (NES) 


It can get worse: 


Ghostbusters (Genesis/Megadrive) 


Worst part is, this is the tip of the 
iceberg with this example. There's 
so much banding, I’m not going to 
bother with it. 
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It makes your curves look blocky. 

It makes lines appear thicker than you originally wanted them to be. 
It blurs your outline too much. 

It follows the outline perfectly, resulting in pillowshading. 


4 ty 


You might be thinking: “/ don’t see a problem with it?’ 


This is because you're looking at it zoomed in. When viewed at 1x or 2x size, it really 
bleeds into the sprite, and that’s when you notice banding. 


How do] fix it? 


e@ Remove a pixel or two from the edge. _ 
© Adda pixel or two to the edge. 
® Use Anti-aliasing. 


Check the colour coded arrows to see these fixes! 


Dragon Warrior Monsters 2 (GBC) 


Left: With banding 
Right: Fixed with the advice above. 


Banding is bad, but don’t worry. 
Sometimes it’s unavoidable. 


When you see it ... fix it! 
Just try to eliminate it as much as you can! 


There are less significant types of banding such as parallel, dithering banding and 
AA-banding, but those will be mentioned in the chapter “Clean-up”. 


Sy 


Pixel-Logic Bonus #3 
ae 


_ Still don’t see what's so wrong about banding? 


S 


If banding were in a regular digital drawing, it would look like this: 


NO banding Banding 


. It would far get worse if it were soft-shaded. 


x 


Another way to prove banding is a pain in the neck is 
Just... I 
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Conclusion 


Anti-aliasing is a big subject. Don't worry if you feel overwhelmed. Most of these 
techniques will become instinctive over time as you make more pixel art. 


Some people make pixel art without any AA and they do an incredibly beautiful job! 
Remember to look up videogames that inspire you and see how they use AA. 


Food for thought Techniques Avoid 
Introduction How to apply Banding 
To AA or not to AA? Flat curves 
When is it necessary? 45° lines 
Jagged lines 
Line weight 


In the next chapter we'll have a good look at colours and how to pick palettes! 


ag 


Colours are lots of fun but it can get tricky. They are the 


Asura Lord 
Aami?s sun 


Kinnara 
Tam Lin Attack 


part of sprites as they build 


Batman (1989 , NES) Shin Megami Tensei 
(1992 ,SNES) 


] 
EHERGY FS O20 Of 


Super Metroid (1994 ,SNES) Tales of Phantasia (1995, SNES) 


Red Earth (1996 , Arcade) 


Mega man 6 (1994, NES) 


SMW2: Yoshi's Island (1995, SNES) 


Breath of Fire IV (2000 , PS1) 
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: Drawn to Life (2007, NDS) 
: Shovel Knight (2014, Various) 
: Mighty Switch Force (2013, WiiU/3DS) 


It can be applied to all kinds of arts: from painting and photography to Interior design. 

, because it’s something already taught in schools and tutorials regarding colour 
theory are widely spread across the internet. Colours can make or break an image, so make sure you 
know your basic colour theory skills. 


For Pixel-logic we will just 


Colours are not displayed the same way on all monitors. 
[t's a common issue with art. | 
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How to pick colours 


Pixel art is a digital art. Unlike traditional media, making colours works with sliders. 
Here are the 3 factors that make up a colour for digital art. You can find them in all software. 


For this book, we will use Method 1 as the standard for 
future pages and explanations that refer to colour picking. 


- The 3 Colour sliders 


Hue 


Saturation 


Note: Some programs use Brightness instead of Value. It’s just a different name. 
When the third slider says Luminosity it goes towards white rather than the pure hue. 


Most, if not all programs should have extra colour pickers. 
These 3 factors are not displayed the same way in each program! 


Hue + Saturation / Value Value + Saturation / Hue Hue + Value / Saturation 


MSPaint, GraphicsGale , Flash Paint Tool SAI , Photoshop, Pro Motion , Photoshop, 
Clip/Manga Studio 
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Red, Green, Blue 


RGB, is an additive colouring method: 


To obtain lighter colours, you add more of each value. 


OE 
a a a 
Ss -  :) 2 
a at, a, 
lS: 
a a a 


To obtain pure greys, give the same value to each slider. 


EE  EyES:—C—<—T 
a a 
ltl 
ae ae 
SS SSS —( 
a a 


To obtain duller colours, move the sliders closer together. 
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Why make palettes? 


Having a palette doesn't necessarily mean literally having colours on the side. You can still eye-drop 


colours within your pixel art. Don’t worry. 
Saves you time 


@), 


You save more time eye dropping the same colours, 
instead of recreating new ones or blending them. 


Keeps you organized 


@ %Se 
= If you're using loads of colours, you might get lost. 


| “sp It’s a hassle trying to find colours if you're working 
- with big art. 


Makes animation easier 


The more shades you have, the harder it is to animate 


sprites. You don’t want colours to flash when your pixel 
art animates. 


Here, a palette is not really However ,this definitely 
requires a palette 


needed here, just eye drop! 


Some programs will automatically generate a palette for you, so you don’t have to! 


65 


These are ramps. Simple! 


i htt | 
| i Le 


Pixel art and having a low amount of colours go hand in hand. 
A good way to do that, is by reusing the same colours across different shades. 
You're not obliged to do this, but it can create some interesting harmonies. 


= Shared colours 


You might think: “This is confusing to me” It doesn’t matter how you display your palette. 


As long as YOU know how to use it. See? 
You can still mix ramps! 
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Hue shifting 


Hue shifting, also known as “coloured shadows” can also be applied to any other visual art. 
It makes your art more colourful and appealing to look at. 


- Regular hue shift 
LDS -Loas 
_ = 


Light brown, used for every shade. With every shade, they become more red. 
The shadow is boring black. The shadow is now warm red. 


You can give green different moods by giving 
highlights and shadows different colours. 


Do this by shifting the hue sliders. 
It’s up to you how much you shift hues. 


You can hue shift left or right on the colour slider. 
The A ramps hue shift towards yellow slightly, whereas the B ramps hue shift towards purple. 


The A ramps look a bit odd. The B ramps are probably what you're familiar with. 
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Sonic Rush Adventure (2007 , NDS) Seiken Densetsu 3 (1995 , SNES) 


Sonic Rush Adventure (2007 , NDS) 


Sonic 3 (1994 , Genesis) 


Coropata (2009 , NDS) 
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This is why generally people often hue shift 
from yellow to purple 


“” ™ ™y 

| hem siiattet, hes habit, 
Le = Oto ks 
Pune 


You can have subtle hue shift or drastic hue shift. It’s a matter of preference. 
Even in greyscale you can notice the principle in action! 


- Multiply layers 


Instead of manually hue shifting ever colour ramp, you can experiment with shadows by 
using multiply layers. You can find them in more complex software. 


— 
MULTIPLY SOx 
| 
—_= 
=! 


MULTIPLY SOx 


—= 
Bi HuctiIecy sox 
—! 


Palette by Cocefi 


Once you found some cool combinations just eye-drop away! 
The examples just show blue green and magenta, but you can use other colours! 
69 
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es Pixel-Logic Bonus #3 
ie 


™ i =_ = 
7 “es Playing with saturation is important too! 


Saturation shift isn’t just like hue shift. Hue is used to create an atmosphere or feeling. 
Saturation is used to highlight a particular area of your shading. 
Don't think of colours like numbers. Just experiment, and see what suits you. 


All colours are the Mixed Saturated Desaturated 1 shade is 
same saturation saturation shadows- shadows - heavily 
Desaturated Saturated saturated 
highlights highlights 
The lighter shade is vibrant. The lighter shade is dull. 
The darker shade is dull. The darker shade is vibrant. 


Conclusion 


Take a look at this Tentacruel sprite, both in its original form and its manually edited versions. 
See the differences? Small colour choices can have big effects! 


a 
a. 
Ep 
| 
J 


no hue shift 


hue shitt 


+tgoreen +b lue tmagenta 
multiply 


Pokémon Heart Gold/Soul Silver (2009, DS) 


These are just a few methods to alter colours. 
The key is to experiment and study other pictures you like. 
Hue and saturation are ESSENTIAL to shading and anti-aliasing. 


no hue saturation no hue saturation 
change =$ shift shift change = shift shift 
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Black tones 


You can do so much more to add style to your sprites! 
Quite a few artists and games add a colour tint to the black or choose a dark grey. 


Fire Emblem (GBA), Mega Man 7 (SNES), Mario Party Advance (GBA), Legend of Zelda: Link to the Past (SNES), 
Mario & Luigi: Dream Team (NDS), Earthbound (SNES), Chrono Trigger (SNES), Breath of Fire IV (PS1) 


From LtoR: Super Mario Kart (SNES), SMW2: Yoshi's Island (SNES), SMA3: Yoshi's Island (GBA), Mario & Luigi: 
Superstar Saga (GBA), Mario Party Advance (GBA), Mario & Luigi: Partners in Time (NDS), Yoshi's Island DS (NDS) 


72 


Black tones are not limited by game or style. 
Even within the same game or within the same style, you can have subtle differences: 


Bull purple Pure black 


dark brown dull cyan 


Pokémon Black & White (2011, NDS) 


Can’t see the subtle differences? Let’s brighten them up a little bit. 


Bull purple Pure black dark brown dull cyan 


Even though your monitor does not display these colours, remember that your pixel art is being shared 
online, on different platforms or different systems. Brightness will vary from each device. 
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» the Ditto of colours. They can easily camouflage 


their w way y into a apie without you e even realizing it. 

yecially with a limited palette. It works well with palettes 
that have special lightsources since fie night time palettes, 
fiery red environments, toxic green glow and so much more! 


When you blend 2 complementary colours, you obtain 


almost a pure grey. It makes grey perfect for blending. 
Not pretty, but useful! Greys cancels out colours. 
It makes them neutral. 


The Chaos Engine (1993, Amiga CD32) 


This is a tree from Boktai: The Sun Is In Your Hand (2003, GBA). 
The overall mood and lighting of this scene is purple, and as 
such all the colours appear different than their usual hues. 


The tree trunk /ooks brown, but under a night-time light. It’s 


If you de-saturate colours, you can easily 
fool people's eyes and mimic colours 
under a different light! That's why greys 
can easily blend in. 


The use of greys willbe mentioned againinthe chapter” = = 8 
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Guest writer: 


Try avoiding pure blacks unless it’s truly necessary. 


You can use dark brown, deep purple, dark green or = | = a 
even dark grey instead! 


Give shadows a colour tint too. Whenever possible, 
compliment the shadow colour with the highlight. 


The soft pink roof has a dull purple shadow. Cocefi’s 
highlights tend to have bright saturated colours. His 
shadows are a little bit desaturated and hue shift. 


Don't be afraid to try weird colour combinations. There's a lot of Trial & Error involved. Make sure to 
fiddle around with the Hue/Saturation sliders, not just brightness for shading. 


oe 
RNA tol Wao 


Guest writer: 


My favo colour is a ou Le (R,G,B)=(84,58 ae 
lc can make so many colour ramps and gradients from one single colou 
Reusing the same eoadiy colours makes pixel art iil more beautiful l think 


When making ont nani eh the colour heey (red, yellow, 
green...). lee urs and light colours together as 
much as pos 2 This: is because itis easier to peer overall 
harmonised hile 


The amount of colours on your colour ramps 
Basie he size of your pixel art. 
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Changing colours during progress 


| change colours constantly. Take some time to look back. Look at pixel art by others then look at your 
own picture again. If | still feel uneasy after looking back over the colours, | change them all one-by-one. 


Colour correction 


This really depends on what the pixel art will be used for. 


For prints and crafts 


Colours can be severely restricted, so fix it accordingly. 
Syosa is referring here to the CYMK print limitation that comes with printing digital work. Colours 
will change in according to this palette, so be wary when using RGB for print. 


For web use 


| embed the image in a sRGB ICC profile which allows me to see and deal with the effects of 
colour-change within browser. 


Sometimes the colours do not match with those of other images, so even when the colouring 
of the image is fine in itself, | sometimes still end up adjusting it. 


Syosa’s advice was translated from his native language: Japanese. 


Translation: Alexander Hicks 
Vay) 


Guest writer: 


While body language and facial expression can set the mood, painting with warmer or colder colours 
can increase the mood! Greys tend to be neutral colours. 


AS &S 


Using blues, purples and teals can give you the impression of a ‘sadd on, 
while reds, oranges and yellows can give a warmer/happier emotion! 


Diversifying your colours will make your work more interesting to look at. It will break the 
monochromatic look. You can achieve this by using different hues in the same ramp. 


fh 


Just make sure the colours will still blend well together. Experimentation is the key! 
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Contrast 


Readability is the #1 priority when choosing colours. es 
| like to choose colours that add a lot of contrast to 

sprites. | always try to have 1 main colour for each 

character | design. This colour either : 


e makes up most of the character 
e or highlights the most important features 


| then use a sub colour to add extra features; usually a &, 
colour that contrasts a lot with the main colour. Contrast 

can be used to make a character stand out from the 
background. This is specifically aimed towards games. ie 
This isn’t an issue with a static illustration, though. 


ef? r YP ff 
re 


Fish (left) is mostly green. | use a yellow to highlight his mouth and fins to 
emphasize his fish-like appearance. The brighter yellow contrasts well with the 
green. 


Ifa black outline defined those details, the sprite would be muddy 
and less readable. A precious waste of pixels and space! 


Paul introduced a very important concept: Readability, which will be the subject of Chapter 4. 
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Different limitations 


Pixel art is born from limitations. Colours can be on affected by limits. Today, there are no limits, but 
artists still like to challenge themselves! Sometimes it can create beautiful effects. 


However, when the general public talk about bit-graphics, they confuse 
the console’s processing power with the colour display. 


Consoles with the same microprocessor power don’t have the same colour rules. 


This confusion lead popular culture to refer to 
graphics from consoles before 1990 as 8-bit, and Even as of 2015, modern day .GIF 
16-bit for graphics after 1990. image files still have a colour 
limitation of 256 colours. 
Most people see the lack of colours, but they 


aren't aware of the exact rules and limitations. The format last updated in 1989 and 
is still 8 bits per pixel. 1 bit allows for 


2 colours. In math, 256 = 2 to the 


Look up the limitations of each console, or 
power of 8 (=2°). 


computer for more info. You'll be surprised! 


$8480 27 


oo7so 3 


NES Commodore64 Sega Master System ZX Spectrum 
Double Dragon looks different on each 8-bit console 
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Sprites with limited colours 


Note: You don’t have to limit your colours. It’s a choice. 


This section is for people who want to replicate old video games, hacking a 2D video game or like to 
have fun with limitations. 1 colour you always include in the total colour count is transparency. For the 


sake of convenience | will exclude it from the next examples 


My sprite originally had 25 colours 
(24 + transparency). 


There is 1 colour ramp for every main colour. 
Yellow — Skin tone — Brown — Teal — Green — Grey 


15 colours. This is the final version I decided to use. 
16 colours is usually the limit for most sprites. 


Fused the skin tones with the brown hair. 
Green and teal now share the same highlight. 
Removed the orange AA: it was barely visible. 


Reduced the colours from 24 to 20. 


Replaced the greys with the skin tones. 
The white shirt uses the skin tone. Not bad. 


Removed the darkest teal. It was barely visible. 


10 colours. The sprite is still intact. 
It doesn’t look weird ....yet. 


Swapped the yellow out for a skin tone. 
Recoloured the greens with the teal ramp. 
Fused the darkest shades with each other 
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Beyond 10 colours this particular sprite loses its quality, colours and detail. 


od 


|” 


However, each sprite is different. There is no “one rule fits all” with colours. 


Step by step summary 


1. 
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Scenes with limited colours 


Re-use your colours to keep your palette small. 


Colours can be re-used in the same piece without losing its value. You can place colours together 
that would otherwise belong to different ramps! 


The reds on the hair = the bed and the night stand. 
The dark skin tones = the bedsheets, the pillow and the wall. 
The light skin tones = the candle. 


The key is to diversify your colours as much as possible. Having different objects with the 

same colour touching directly will make them blend. The sheets and bed have different 
colours, so they don’t blend, while skin tone and sheets are the same colour, so they feel like a 
whole. The hair is purposefully red to separate the girl from the wall. 
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Extreme limitation 


Sometimes for some extreme reason, we have to work with a severely limited ugly palette. 


EWWW! 


Luckily, we can make it more intuitive to use by rearranging the colours by how we 
perceive the colours in terms of luminosity. Some colours in the rainbow “feel” darker and 
lighter. 


Groovy~ 


Guess you could call it Xtreme Hue-shifting. You can extend the palette further with 
dithering too. But be warned: excessive dithering can make a surface look textured or rough. 
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Conclusion 


Colour is all about context. It doesn’t just create the mood or atmosphere of your pixel art, it also 
defines the style. Colours can easily fool the eye, and with some practice, you'll be able to use them 
to your advantage. 


Pokémon Heart Gold/Soul Silver (2009, DS) 


Food for thought Practice Limitations 
(optional) 
Introduction Hue shifting Different limitations 
How to pick colours Black tones Sprites 
Why make palettes? Greys Scenes 


Colour ramps Extreme limitation 


Choosing colours I-III 
Contrast 


Colouring doesn't stop at this chapter. Many other aspects use colours to their advantage to get the 
most out of pixel art. Just make sure to refresh your colour theory and remember: 


Experiment! 
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Introduction 


Ever looked at a sprite and wondered: “what is this supposed to be?“ 
Misinterpreting sprites is common because they lack detail. 


Zelda: LTTP had some muddy sprites. 
Agahnim is the peak of pixel misinterpretations. 


A,gahnim 


& & | Bi 
e’* 
@ 


So is he wearing a hat, or is it a face? 


er 


N 


Readability means Clarity. 


How well does your sprite read? 
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Is Mario smiling or shocked when you lose a life in Mario 3? At 
16x16 pixels, it’s hard to tell he’s shocked with his moustache. 
When he is on a bigger canvas, it is easier to tell. 


SMALLER sprites make it HARDER to convey things 


SMB (NES) SMB3 (NES) SMB2 (NES) SMW (SNES) SML (GB) SML2 (GB) 


——s ape 
14x14 16x16 16x24 16x24 12x11 16x21 


nih, ‘@ Big sprites need clean lines and solid drawings. Small sprites need 
recognizable features for readability. You can’t squeeze details 

into tiny sprites, so make sure to adapt character designs. 
The size of your sprite and canvas will determine 

what your focus should be. 


Guest artist: Syosa 
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Case Study: Cryamore 


Original sprite model ~190px tall 


PROS: Clean and detailed at high res. 
More room to animate. 
CONS: Time and effort for animation. 


70% of her original model ~130 px tall 


PROS: Moderate high res quality. 
Frames are finished sooner. 
Simplified facial expressions. 


CONS: More readability issues, less HD. 
Less detail for complex character design. 89 


We were kinda setting the bar extremely high 
when it comes to ultra-high res HD sprites. [...] 
original i: Frankly, it would've made no difference to just 

‘a hand draw it at that point. Of course, we could 
just keep the HD sprites and reduce the frame 
count, but that would make things look ten 
times cheaper, [...] So, we sat back and took a 
constructive approach at the way we were doing 
things, detached from the emotional appeal of 

how much we were in love with this look. 


Cryamore Dev-Blog 


The smaller the sprite animation, the smoother 
the illusion of movementis. Just by the size being 
cut down, animations will look even more fluid. 
Smaller sprites also allow you swap costumes 
more easily! 


Persona 4 Arena (ArcadelPS3ix:b360) 


Guihy Gear XX (Arcadel/PS2) 


The King of Fighters XIll (Arcade!/PS3) 


Cryamore 


Tales of Destiny: Directors Cut (P52) 


ical f " Hameo x Capcom (P52) 
fey Disgaea 1 (P52) 
¢ 3 La Pucelle: Tactics (PS2) 


The line between binary art and pixel art starts to blur when sprites get too big. 
Games like Dengeki Bunko Fighting Climax (PS3) are borderline binary art. 
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.. Dut pixels matter more! 


Bigger sprites have little readability issues. Smaller sprites tend to be a bit trickier. 
Obvious right? But it’s not that simple. 


ey ' 


Super Mario Kart (SNES) had improved Yoshi sprites for the Japanese version. 
When he shrinks on screen, he gets less READABLE. Does he still look like Yoshi? 


dit de & BABA S 
BAA as 


INT 


Even within the same canvas, 
your sprites can always be improved. 


Guest artist: Neorice/ Guido Bos (@Neoriceisgood) 
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Pixel-Logic ti) 


Editing a sprite over and over is common. 


Make multiple versions and have 
people pick, if you feel uncertain! 


This sprite from Pokémon Red/Blue (1998, GB) is meant to be a 
boy playing his Game Boy. The sprite is within 16x16. However 
many people see this as a boy holding a cup. Most of the 
square looks white. It has 2 black pixels and the 2 grey ones to 
show the shadow of the rim. 


s 


Let’s move the pixels around and see if we can fix it. 


If we change the sprite drastically, we risk creating new readability problems. 
Right now it looks like the Game boy became his shirt, and his torso. 


We can extend the cup and move it up covering the face even more, but this 
could easily look like a beard or all kinds of other things. It’s too muddy. 


We now have a flat grey shape with a white line of 4 px wide. The white high- 
light makes the object more 3D. But it still looks like a random cube/prism 


By simply adding a 2px line to define the Game boy’s cartridge slot, it works! 
This looks more like a kid holding a Game boy! 


For small sprites, simplicity usually works. 
Don’t overdo details and stick to simple shapes. 
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Why every pixel ma 


Guest writer: 


Very small resolutions can easily get problematic as every 
pixel, including its colour, makes a big difference in the 
whole piece. Thus pixel placement plays an important 
role in order for viewers to understand your work. 


One pixel might just change how people interpret it! 


Changing just a few pixels can make this bat: 


original 


look evil 


have feet 


be surprised 


have longer ears 


make the bat look smaller 


Chasm (PC & PS4) (Work in Progress, future release) 
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Older video-game graphics may be small, but the place of each pixel is not trivial! 
A tiny area like 6 by 6 pixels can offer you a large amount of variety! 


>, Be a ah oh oa oh 
i 2 Gh ah oh ah oh oD 
de, doy Gh oh mn oa ak ie 
pa ae ee 


Characters from Technos’ Crash‘n’ the boys & River City Ransom (NES/Famicom) 


bo ba ps 
ba bs po ps 
ba bsp) 0 


The Kunio-kun series made each character look different by slightly adjusting pixels of only their 
eyes and hairstyles! They were enough to show diversity. 


Even the smallest pixel can make a difference for low-res graphics. The buzzy beetles from SMB 
somewhat resembled shells with a big black pearl-like eye. 


Buzzy beetle from Super Mario Brothers (1985, NES) 


In the Super Mario All-Stars remake (pictured bottom left Hl ), they look more like the concept art. 
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Recognizable f 


Guest writer: 


So you need to create a new sprite. What size does it actually needs to be? 
Ask yourself a few questions: 


Do | need to see their hands moving? Do their mouths need to be visible or animated? Must facial 
expression be readable? Do they wear or hold an item? Does the sword have a magical gem in it? 


No matter how big or small the item is, 
ona small pixel canvas it needs to be recognizable! 


The smallest part | want here is facial expressions. 
| don’t care about hands or other body parts. 


Try to figure out the smallest part that needs to be visible. Once you've got that down, it’s easy 
to figure out the minimal sprite size you can work with. 


Don't focus on getting every detail into your sprite . Find out what makes the character unique 
and represent the concept the best. You'll often hear “less is more’, and it tends to be true. 


If you have the slightest doubt about your sprite being readable or not, ask someone else, and don’t 
tell them what it’s supposed to be! Even better, ask someone with little to no pixel art knowledge. 
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Easy to read symbols 


A few pixels in height can make a BIG difference. 


# #2 


28 px 4S px 


By Michafrar 


With less space, there is little room for many facial features or hands. 
You still can add them, but they will make your work crowded and muddy. 


If you're using concept art, photo references or any sort of guiding, 


be ready to sacrifice unimportant details if necessary. 


Working in bigger resolutions may seem easier, but anything is possible with small resolutions. 
Choose what is essential, so don’t worry if some details don’t fit your canvas! 


Original art by By Michafrar Guest artist: 
Monolith Soft Neorice 
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Symbols | - Hands 


The next few pages will discuss hands and eyes. We'll tackle more in future chapters. 


They are the trickiest at small scales. You won't have enough space to pixel every finger! 


@ Start hands by painting shapes. Tiny line art is too hard. 


Pe a 


Line art is tricky with barely any space! It will confuse you even more. Use flat shapes, 
then detail. Much easier! It will help you picture the hands in 3D in your head. 


2 Draw hands like mittens - then add detail. 


4.45. oo 


There is no point highlighting every single finger. You won't have the space to. 
Focus on basic shapes. Even when you have fingers spread out, start with mittens. 


@ Focus on the index and the thumb. They define the hands. 


An opposable thumb and an index finger define the human hand. Those two fingers 
are enough to show gripping, pinching, pointing, and so much more. 


C// 


Draw only 3 fingers and a thumb if needed. 
im, 1) 


Cartoons sometimes draw 4 fingers to simplify animation. Pixel art too. Only draw 5 
fingers if you have enough space. 


® Use different colours to separate each finger. 


Hee ¢ 


You won't always have room to have all fingers or 
give them an outline. The more different colours 
there are, the more they stand out. 

To tell where each finger is, you will have to play 
around with colour brightness. Highlights and 
shadows help bring volume to your otherwise 
flat hands! 


Draw the hand, shrink it and it use as reference. 


Working at small scale can be tricky because you can't “draw” spontaneously. If you're 
really having trouble or work under a deadline, draw a hand in your regular painting 
program and shrink it. Then use it as a reference. You can also study the anti-aliasing to 


help you out a bit. 
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Symbols Il - Eyes 


@ Eyes are the main focus and highly important. 


Human beings are captivated by emotions 
at” and faces. For this reason alone, you should 
polish your creature sprites, may it be animals 
or humanoids. Your audience identifies faces 
by looking for eyes. They are generally the 
first thing people notice. 


Art Guest artist: Temmie Chang 


@ Sometimes there is no space for eyes! 


Beyond Oasis (Genesis/Megadrive) 


Sprites that don’t have enough space for any facial features usually can’t fit in eyes 
because they would be smaller than 1 px. If so, focus on the shadows cast on the 
face to create the eye area. If you are unsure, look up some references of games. 


@ Glasses: keep it simple! 


ALIPPin LE 
BLESS fH. 


Ace Attorney Investigations: Miles Edgeworth (NDS) + Tales of the World: Narikiri Dungeon 3 


You might have to sacrifice detail depending on sprite size. You either focus on 
The glasses themselves and exclude the eyes. OR 
The top of the frame and exclude the bottom side of the frame. 
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A few pixels make a big difference when zoomed out. 


It’s hard to tell at first glance, but a few pixels difference can have many outcomes. When 
zoomed in, some pixel placement may not make ANY sense to you. It may feel unnatural 
if you're used to brush strokes. When zoomed out, some pixel combinations may give 
eyes a completely different feel! A-A and sub-pixeling really come in handy here! 


A white shine can also affect the i a 

outcome! Sometimes it’s a single a 

pixel, sometimes it’s AA or sub-pixels. Des, | ee mu, 
By Michafrar 


Eyes come in many styles, but don’t avoid pixel detail. 


™ 


Eyes usually define your style. With pixels you can do whatever you want in term 
of eyes. There are no limitations besides your canvas. You can further develop your 
style but just like regular art, make sure to polish your technique. 


Use subtle Anti-aliasing if needed. 


Guest artist: Thernz 


As seen in Chapter 2, AA can improve clarity. It has nice results! 


Character design & Proportio 


Super Back to the Future 2 (SNES, 1993, Japan exclusive) 


Big heads have many advantages. They give room for emotions and expressions and clearly 
show who the character is. It’s a stylistic choice so it may not be suited for every situation. Heads 
are the main reference for human proportion and they easily vary! 


Castlevania: ‘Aria of Sorrow (GBA), Castlevania: Dawn of Sorrow (NDS) 


You may depict characters with realistic proportions. They focus on body language. As a 
result, you should pay attention to volume, shading and anatomy within these restricted areas. 
Make sure to use silhouettes. Your characters have personality and act. 


Give bodies personality by diversifying poses and body proportions 
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Different proportions have different functions. 


The proportions you choose depend mostly on what your sprite is used for. General artwork, 
user icons, overworld sprites, dialogue sprites, different perspectives: you name it! 


world battle = icon dialogue 


+a? 


battle a = =oworld) = field ~~ battle b portrait 


world battle 


Mario & Luigi: Superstar Saga (GBA) 


Pixelart finds a way to adapt all character designs to fit small areas. 
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A clear silhouette shows important features like head, limbs, cloth, etc. 


Anything that highlights the character or object's action or function is a good start. 


This is also very useful if you're going to further animate it. 


Streets of Rage 2 Streets of Rage 3 


Streets of Rage - like most sequels do - would improve their sprites over time. The silhouette 
of Signal is better in the 3rd instalments as his stance, his fist and his hairstyle is highlighted. 


The silhouette doesn’t show too much, but 
it became readable by using different 
colours in all sort of ways within the 
drawing. 


Duelyst (PC) (Open Beta, 2016) 


Drawing a rough silhouette base and filling up 
with details is a good practice. Try not to 
overlay things, and if that happens, use 
colour contrast to tell features apart. 


Chasm (PC & PS4) (WIP, future date) 
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Colour design 


Giving your characters a main and secondary colour, gives you nice side effects. Their design 
becomes more recognizable and more readable. Don’t include unnecessary details on your sprites. 
Break them down to 2 or 3 main colours like other recognizable characters. 


ce 


Nuclear Throne (PC, Steam) 


Fish? That’s the green guy with the yellow lips and fins! 
Rebel? She wears a large blue scarf. 
Robot? He's defined by his red scary and ominous eye, separating top and bottom. 


Well-known characters seen in many games have designs with vibrant colours. 


Mario Sonic BOO Pikachu i 


Pick the right colours to represent your characters features. Wrong colours lead to confusion. 


COBY S894 


Swoopers from Super Mario World This isn’t due graphical limitations. 
(SNES) are bats. However their nose Probably so that the arms wouldn't blend 
was coloured orange, which makes with the main body, but alas, they look like 
it look like a bird with a beak. Later the stirrup of his saddle. Super Mario Maker 

games fixed this. (WiiU) fixed it. This issue is similar to Link's 


Why were Yoshi's arms orange? 


infamous pink hair from Zelda: LTTP. 
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Guest writer: 


Drawing outlines can take a lot of precious space, so playing with dark and light tones instead 
might do the trick. 


Light is used to 
Dark pixels 


Light and dark could change roles depending on your background colour or light source. 


a - ae 


- 


= 


The darkest tones are used not only as shade, but to give depth and outline elements! 
highlight edges and crucial details. 


Using a different light source (e.g. in this 
example, from the bottom) to tell 
muscles and other body parts apart. 

PC) (Open Beta, 2016) 


Duelyst (PC) (Oper 
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Spacing and tangents 


Spacing refers to how far apart things are. If two areas of the pixel drawing touch, the viewer 
may have a hard time telling what's going on. Spacing is using limited space to fit in as much 
information as possible. If you use up too much space in your sprite, give it more room to 
breathe! 


ee ||| 
= «© ae | 6|UdlhUe 
Think of it like letter-spacing with fonts! 


For example: a mouth needs space above and under it, so you can tell it’s a mouth. If the mouth 
were to touch the chin, or even the nose, it would be unclear what it’s meant to be. 


ay 


Nuclear Throne (PC, Steam) 


One way is to get rid of in-lines. 


They can hinder readability as seen in Chapter 1 (p9) , Chapter 3(p20) and in this chapter on the 
previous page you just read! They're not bad per say, but can be annoying. 
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Another way is tot 


In Super Mario Brothers 3, the frog suit 

is meant to have eyes on top of Mario or 
Luigi’s head. The way pixels are spaced 
out makes it look like bunny ears instead! 


Except for one good frame: Mario kicking a 
shell is undoubtedly a frog head. Let's use 
it as a reference to fix this. 

Top row: Original 

Bottom row: Edited 


Not only did | remove the black inline, 

| simplified the design. The eyes are 
completely white with no eyelids. The 
pupils are now 2x2 pixels and don’t blend 
in with the outline! 


sy 
ea, 
(26) 
(oe) 


Here is how we interpret the frog eyes if they were in HD 
(top row = unedited, bottom row = edited). 
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Moving areas and adding 


Before the remakes of Pokémon Ruby/Sapphire/Emerald (GBA), Brendan 
created some confusion: Is it white hair or is it a hat? The back pose 
doesn't help the problem: his hair is painted blue and blends with the 
headband! 


If we use the space between the eye and the sideburns, we create a 
tangent! 


We can create more space for the hair by selecting 
a part of the face and move it to the right. Now 
the hair has 2px of width, enough for it to stand out. 
Make sure to try multiple versions! 


o- OD 


The palette doesn’t allow for a dark brown. So to paint the hair we have to use the darkest 
skin tone and make the hair more noticeable. 


eee 
@ @ © 


=, 
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Sprites and Backgrounds 


Sprites should always stand out from backgrounds for game play purposes. 
What do you want your audience to focus on? 


If you are not making a game, you still want to distinguish backgrounds from objects. This 
happens in other mediums such as Photography. This is for Readability. 


Adding Outlines 


| eet 
tr 


Correcting colours 


Po ay 


mar tFiaa" & 


le ee 
ae a 


Focus (foreground is sharp/background is blurrier) 


NS a oe 
. ‘ 5 7% ~ 


Tak: Mojo Mistake (NDS) 
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Kirby and the Amazing Mirror (GBA) made the decision to include highly detailed paintings as back- 
grounds. It’s no surprise all 3 techniques were used: 


Objects and sprites have clear outlines to stand out. 


The colours of the background are softer to compliment the foreground. 


Anti-aliasing & Dithering 


More advanced techniques such as AA and dithering might not get a chance to be used, as they 
take critical space. 


As seen in Chapter 2, AA can slightly improve readability when used moderately. 


From Kirby’s Dream Land 2 (GB) 


The original King Dedede sprite (left) has subtle AA to clean up the curves. The sprite on the right is 
just as good, but lacks colour and it’s easy to misinterpret blobs of pixels. 


From Jewel Master (Genesis) 
Left: Original. Right: Edited. 


Dithering (checkered shading) is pretty useless on small scale sprites. Dithering works well on 
larger pixel art or textured surfaces. It makes your sprite look rougher and less smooth. 


This will be detailed in the chapter titled: “Dithering’. 


A less common technique nowadays, but useful for colour limitations. 
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How to spot readability issues 


Use preview thumbnails. 


By Michafrar 


Blurring the picture. 


en/ja/ru 


Single-Image Super-Resolution for anime/fan-art using Deep Convolutional Neural Network 


By Michafrar 


waifu2x 


Image 
URL: 
FILE: 


No file selected. 


Limits: Size: 3MB, Noise Reduction: 2560x2560px, Upscaling: 1280x1280px 


When using 2x scaling, we never recommend to use high level of noise reduction, it almost always m 
‘worse, it makes sense for only some rare cases when image had really bad quality from the beginning 


—Noise Reduction (expect JPEG Artifact) 
© None © Medium © High © Super(tmp) 


a2 


When working on a picture, make sure to zoom 
out a lot. To prevent this you can also just have a 
permanent preview of what your work looks like 
at its true resolution. 

(1x- 100% size) 


This example is within Graphics Gale. 


Sprites will most likely look blurry on different 
devices, or even the human eye will blur pixels 
when viewed from far away. Blurring can also 
help you find banding. 


If it looks bad when blurred, you have to go back 
and fix it in the pixel version. 


Waifu2x allows you to upscale any picture, not 
just pixel art. It upscales your work, reduces the 
noise level and carefully optimizing your work 
for higher resolutions. 


When curves don’t look right, you might want to 
go back and fix those jaggies! It’s. . .also really 
cool. 


Conclusion 


Sy i 


Big or small, pixel art can occasionally create confusion. With limited space we sometimes have to 
have to sacrifice detail to keep things clear and readable. 


Remember that every single pixel matters. 


If you're unsure of how readable your sprite is, don’t be afraid to go back and fix things! 
Working small is a challenge, but it will make you realise how important every pixel is. 


5 
Whe oy 


Food for thought Tips and tricks Art design 
Introduction Easy to read symbols Ch. design & Proportion 
Size matters. .. Symbols | - Hands Silhouettes 
...but pixels matter more! Symbols Il - Eyes Colour design 
Why every pixel matters | Spacing and tangents Light & Shadow 
Why every pixel matters II Anti-Aliasing & Dithering Sprites and backgrounds 
Recognizable features How to spot readability issues 


Pokémon Red/Blue/Green/Yellow (GBA) 
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Introduction 


Dithering is a technique to make gradients using limited colours. 


You use patterns to mix colours. 


With only a few colours you can create the illusion of 3 colours or more! 


Dithering is often associated with the early days of pixelart. 


Older computer graphics got the most out of their colour limits with dithering techniques. 


~ 56 unique colours. 7 unique colours. 4 unique colours. 


Dithering 


Pixel art? x Pixel art? i Pixel art? i 
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When to use dithering 


It gives pixel art an unnecessary gritty texture. 
BUT 
Large cel-shaded gradients without dithering result in FLAT and STRIPED areas. 


Over time, game graphics added more and more colours. Dithering is less common now. 
It requires a lot of space to be used properly, so that’s why it’s rarely found in sprites 
but occasionally in backgrounds. It also harms readability, as seen in Chapter 4, p.26. 


af To understand how often and to what degree dithering is used, study 
game art and learn from your favourites. You'll learn a lot from 


just observation. Try shading with clean shapes first, though. 


Street Fighter Alpha 2 (PS1, Arcade, various consoles) 


When should | try dithering? 


¢ Gradients that would otherwise use too many colours to do manually. 

¢ Things that don’t animate. Seriously. 

¢ Textures (see stylized dithering). 

¢ Heavy colour limitations. 

¢ Backgrounds: skies, space, vast areas that may otherwise look empty or flat. 
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This is a sprite from Monster in My Pocket (NES). The fully dithered version on the top left is the 
original as it appears in the game within NES limitations. The others are modified versions. 


AAU 0 lb ixSre now dither 


CONS 


- Rough and gritty 

- Time-consuming 

- Unnecessary texture 

- Not suitable for sprites 


- Useless for high colours 
- Hinders animation 
- Wobbling frames 


DITHERING 


SMOOTH SHADING 


- May look flat 
- Doesn't do gradients well 


Checkered dithering 


These are the most common patterns you will find as they offer the most variety. 
Below are all the levels of brightness within the checkered ‘family’ 


12 same patterns but inversed colors ) 


ee ee 


| 

a 
BEEBE HEEE 
BEBE eee] 
BEEBE EEES 


Should you get lost, remember each level with a pattern. 
Checkers, crosses, squares, diamonds, etc. 


You can choose how many levels of If you get to work on larger areas, you 
dithering you want between 2 shades. can freestyle the dithering a little bit, 
It all comes down to preference or the as long as you never have a wide pixel 
length of the gradient or how many (2x1 or 2 pixels that touch each other). 
Shades you have. 
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Dithering for curves 


Curves can be trickier to dither, so make sure to fiddle around to see how it looks. Sometimes 
you may get double pixels that look out of place. When this happens, you can select 
and slide the dithering you've already got, rather than redo it. 


f 2 a 
= 


fh = Pie & eck! 


Pizels 
oH 6 


If your dithering is part of 
a tile set, this may be 
unavoidable. 

This is because tile sets 
are always an even 
number of pixels. 


If this happens, make sure to 
have 2 different tiles. 


Ecco the Dolphin (Genesis/Mega Drive) 


When you have no colour limitations, you should use dithering with caution. It’s best to avoid 
it. Your goal is to have dithering seamlessly blend colours without them standing 
out. If the difference between 2 colours is too high (high contrast), you probably shouldn't 


dither. 
Gee Rag mute hy® 
With low contrast, it feels softer. with high contrast, it’s quite harsh! 


Pokémon Mystery Dungeon 3: Earthworm Jim (Genesis/Mega Drive) 
Explorers of the Sky (NDS) 


Sonic Advance 2 (GBA) 


Checkered dithering is most 
Keep the contrast low, so the dithering will be smoother. 
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Other patterns 


A type of dithering found in Genesis/Mega Drive games, but can be used today for stylistic purposes. 
For CRT TV's, they are more effective 50-50 dithering than the regular checkers. 


Left and centre: Vectorman 
Right: Donald Duck in Maui Mallard 
Lines can be used as smears or blur with limited palettes. Lines work better for blur than 
checkerboards do. This only works for limited animation, NOT smooth animations. 


by aie ay : k 


Pokémon Crystal (GBC) 


Checkers are more suited for gradients. Parallel lines were for buffer-shades and opacity tricks for 
old CRT televisions. For more examples, check page 16. 
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Discontinued lines 


a A variant of the parallel lines. The only difference is that 
=n ; 
= this show more value and levels of gradients. It can also 


add a neat effect. 


on: wll 
Pokémon Mystery Dungeon Strip Poker: aSGoC (PC DOS Earthworm Jim 
3: EoS (NDS) (Genesis/Mega Drive) 


A variant of checkered dithering or parallel lines. It uses only 


Se 1 line of checkerboards. They resemble dents or teeth. 
This dithering is useful for textures if you have little space. 


This type isn’t suited for gradients, though! 


Intertwined dithering 


Kolibri (Sega 32X) 


Intertwined Dithering (woven, overlapped, etc.) has patches of dithering enter much darker 
or lighter patches. The gradient sometimes goes back to lighter patches on its way to the 
darkest shade. Different patches of checkers are weaved together. 


Ecco the Dolphin (Genesis/Mega Drive) 


If you have trouble doing this manually, make 2 layers of dithering, and have them overlap! 


World of Illusion (Genesis/Mega Drive) 


23 


Random dithering 


1 
} 


Randomized dithering doesn’t have much thought put to it. You still need to make 
sure the gradient seamlessly flows from light to dark. Random dithering can be obtained by 
randomly hand placing pixels here and there. However, it’s usually the result of filters, 
photo-manipulation or spray-paint tools. 


This isn’t really handcrafted pixelart, so 
it’s still advised to manually fix it. 


It can appear quite lazy, so use it in 
clever ways and on big canvases. 


Kirby’s Dreamland 3 (SNES) 


A gradient reduced to 4 colours 
with automatic dithering. 
It still needs a lot of work and 
looks like random noise. 


Of course, random dithering can be done by hand. You can create this effect from scratch, if you wish. 
You start art by painting several shades 0 of colours and finish by blending the edges with random noise. 


B % 


By Guest artist YAA 


In most cases, 


Try to make patterns or tiles out of them (see page 12) 
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Now here's where things get interesting! 


Get creative! 


The previous forms of dithering were quite rough. With stylised dithering, 
! Remember, that you 
need space to use these. 


By Michafrar ; _ Shovel Knight (PC) 
nF ae ———_ 


Kirby’s Adventure (NES) Street Fighter Alpha: Warriors’ Dream (GBC) 
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You can even take random dithering (from p. 10) and turn them into repeating tile sets to avoid 
them looking chaotic. This randomness is controlled, rather than loose. 


Crash‘n’the boys: Street Challenge (NES) Crystalis (NES) 


Don’t confuse texturing with gradients! 


Gradients are the transition from light to dark. Textures are the feel of material. 
Stylised dithering can be a combination or both, or just regular gradients. 

Textures don’t always need a gradient from light to dark! 

Dithering can provide texture if you use it for patches, but not as gradients. 


THOU OU 
The pore “ae 


By Michafrar Guest artist: Neoriceisgood Guest artist: 
Anubis Jr 
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Peele v's 
oat 


Another thing to notice is that Yoshi’s Island chose to have smooth cel-shaded gradients for the sky. 
There is no dithering and it holds up well. 


ed ET 
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More than just gradients 


Breaking through cel-shading 


A modern way to use dithering is to break through cel shading. Even with unlimited colours, 
dithering sometimes imitate soft shading. Think of this usage of dithering like a smudge brush. 


Pokémon Fire Red/ Leaf Green (GBA) 


The highlight of Gengar’s horn blends into the darker main shade, rather than being cel-shaded. 
You can do the same technique, but just using a buffer-shade in your colour-ramps. 


1 1 +1 +1 


This looks fine cel-shaded but dithering looks better here ... 


Mixing colours 


Dithering can help you blend colours, especially on blurry displays. You'll only use this 
technique if you're working with limited colours, though. 


*H- -+H-o 
f-- a-h-c 
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Let’s see this technique in use with some parallel dithering used in this Genesis/Mega Drive 
sprite. The results don’t look pretty by modern standards, but it did look nice on CRT TV's. 


o> @ o-E -Bll-m 


As seen on a CRT television 


Computer graphics after this point would have more colours and even transparent (alpha) 
layers, so this technique is extremely rare nowadays. However, older graphical displays 
such as the 4 colour CGA mode hugely benefited from having extra values by blending cyan, 
magenta, black and white! 


Space Racer (PC DOS) 


We briefly discussed this in chapter 3(page 25) where with 4 colours you can easily obtain 
more values! 


+= 
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Brushes for dithering? 


When dithering is time-consuming, there are ways to use dithering-brushes! 
Some of these programs use dither patterns or brushes that help you speed things up. 
No need to “copy-paste” all those checkers. 


Paint Mode Settings 


Brighten (5) : 


Translucent (%) : 
Saturation (%) : 
Hue shift (9) : 
{-] Dither: 


[| Inverse z se [+] | | tcatecaaries 


Formula: Gradient Invert EE | 
[_Delete [Clear |[Inver t] 


Pro Motion GraphicsGale Graf x2 
Aseprite and other programs allow you to make brushes too. 


studies HD 
Index painting for Photoshop which makes dithering easier to manipulate 


© * DAN FESSIKER 


- ARTIST FOR GAMES - 


HD INDEX PAINTING IN PHOTOSHOP | pixe: arr 
SE. “Se Oe OT 


Article: danfessler.com/blog/hd-index-painting-in-photoshop 
Preview video: youtu.be/7Q36EyvaYG8 
Support the indie game Chasm! www.chasmgame.com 


Remember pixel art is about control, so make sure to manually fix your results! 
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The Sega Genesis (Mega Drive) heavily relied on lined dithering. 
(North-American co-axial cables, RF 
outputs or PAL antenna cables) 


Top to bottom: 
Comix Zone, Earthworm Jim and Donald Duck in Maui Mallard (Genesis/Megadrive) 


The Super Nintendo, had dithering early in its lifecycle, but later games used proper alpha layers. 


Super Mario World (SNES) 
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Dithering isn't new 


Dithering can be traced back to many older artistic methods. 


(Cross) hatching is the oldest form of using patterns to show tone and value by using 
just 1 colour. It can be found in pencil drawings, printmaking, etching, woodblock etc. 


i 


Pointillism also requires small distinct dots to create an image. Traditional art isn’t limited 
to a grid, so this way of mixing colours is organic and free-form. 


“ e .. © > 
— > . « | 
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Paul Signac Entrée du port de Marseille (1911) 


Monochrome graphics, such as MacPaint can only show 2 colours: black and white. 
Many pixel dithering patterns were used to show greyscale. 


File Edit Goodies Font FontSize Style 


MacPaint 


Works by Susan Kare(1984) 
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Conclusion 


Many pixel artists choose not to use dithering. 
It all comes down to preference. 


You most likely won't use it much. It can be quite time-consuming and tricky to get right. 
You can choose to avoid it and stick to clean, solid shapes. 


Remember: LESS is MORE. 


Dithering is a powerful tool nonetheless. There are some marvellous things to create with 
each pattern. If you do choose to have dithering, use it with moderation. 
It shouldn't stand out or clash with other visuals. 


® 


Food for thought Techniques Trivia 
Introduction Checkered dithering Brushes for dithering? 
When to use dithering Other patterns Before transparent layers 
Stylised dithering Dithering isn’t new 


Neth) 


Lord Monarch (MegaDrive) 
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Introduction 


Perspective is how the world is viewed by the human eye. 
The further an object is, the smaller it looks. The closer it is, the bigger it looks. 
It’s an integral part of art and illustration. 


e 


When creating pixel art illustrations, perspective is a necessary skill. 
So when you're creating video games, you need to consider the following: 


In most 2D games, there is no real perspective or vanishing points. As artists and designers, we need 
to think outside the box to make explorable worlds! Many of the game perspectives in this chapter 
are pseudo 3D projections, meaning that they imply 3 dimensions - length, width & depth - 
but are really just 2D fields. 


Use a perspective that benefits your game-play. 
Make sure the visuals of your world and characters work with your game design. 
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Perspective vocabulary 


Here's a quick refresher on some perspective vocabulary that will be used frequently in this chapter. 


Plane 


A 2D flat surface that shows length and width. 
It’s like an infinite wall, ceiling or floor. 


Axis 
A geometric line with a fixed direction. 


Axis Y is up and down, axis X is left and right, and axis Z goes 
back and forth. 


Vanishing point 


Due to perspective, two parallel lines meet at a single point. 
Like a road that extends towards the horizon and disappears 
into a single dot. 


Projection 


The way a 3D view is drawn in 2D. Think of it like how the 
world is shown on a map. 


Orthographic 


Flat views with no perspective. 


BY be 


We'll avoid math as much as we can, but we'll refer to 
,and when talking about dimensions or axis. 
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Orthographic projections 


Side-scroller 


Top-Down 


Top 


Isometric 


Ss 


45° Dimetric 


os, 
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arenas 
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Multiview drawings 


These are flat views with no perspective. 
They're quite common in most 2D games. 
Everything is perpendicular in a parallel 90° grid and the same scale. 


These views lack depth, so you can use parallax scrolling to add perspective. 
Only 1 or 2 planes are visible with game-play being on a 2D plane. 


With only 2 planes visible, and no vanishing points, everything 
as looks like a square grid. Vertical and horizontal lines all form 90° 
4 UI angles. The geometry is just a guideline though. You can 
draw things at any angle you want. 
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This is the most common perspective for 2D games. It’s often associated with platformers 
and shoot’em ups as it focuses on vertical and horizontal movement on 1 single plane. 


2D side-scrollers come in many genres but usually stick to similar views, not just 1: 


Cross section (Camera right in front, the world is like a slice) 


Brow fl Top-down view (Cameras slightly above the ground) 


Oblique view (Front side is flat, but the sides are slanted) 


These views are ideal for corridor-type levels. 
No matter the view, the line the character travels s along does not change. Even when it 
looks like you can go up or down, you're always stuck to a single 2D path. 


mee US lkable 
area 


Slightly top-down cross-section 1 39 
orthographic orthographic 
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Shovel Knight (PC, Various) 


Megaman X2 (SNES) 
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ARE NOT ALLOWED HERE?! GET OUT! 
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Frogatto (to be released) 
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Ristar (MegaDrive) 


The grid is made up of squares tiles which makes creating worlds and environments a breeze. 
It’s often associated with free-roaming overworld and it’s suitable for exploration. 


You can have different variations of top-down angles. 
It depends on how high, or low you want the camera to be. 


Front > Top Front = Top Front = Top Top > Front 
Like Beat em’ ups. Common angle. Easier for tilesets. Good for altitude. 
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Mercs (Arcade) Top (L-R) : Mother 3 (GBA), Pocky & rocky (SNES) 
Bottom (L-R) : Advance wars (GBA), The Story of Thor 2 (Sega Saturn) 


141 


Top down games usually view the world from above, at 45°. 


a ie. 
ya % 
Bye 


Zombies Ate My Neighbors (SNES) Mario & Luigi: Superstar Saga (GBA) 


However some dungeon crawler games (like 2D Zelda titles) look into a room with a camera placed directly 
above. This top view isn’t orthographic anymore and resembles a 1-point perspective view. As a result, the 
room is in perspective while the objects are not. They appear in a top-down angle instead. 
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142 LoZ: Link to the Past (SNES) Goof Troop (SNES) 


The Zelda perspective prok 
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Dungeon example. 


Oddly enough, outside the dungeons, Zelda games adopt the traditional top-down view. This looks 
vastly different from the 1-point perspective used in dungeon rooms. 


All objects are viewed at a 45° tilted camera, yet the room is at 90°. Everything looks correct when sprites 
are near the north wall (A). When sprites are near the south wall (B), they don’t make sense. Technically 
the character should appear like (C) but you wouldn't be able to see him very well. 


By flipping the screen upside down, we can see why the sprites in B look very wrong, yet the 
perspective stays the same. It’s as if Link is laying on the floor. 


If walls are blocking the view, you can easily remove 
them and create an invisible “4th wall”. Some games 
include walls; others remove them to show more of the 


a 


floor. 


This is a sub category of top down views. This view is EXACTLY 90° (if you were 
looking straight downwards). This design choice is uncommon and only works for 
a particular set of game-play types. You can find real world examples of this style 
in geographic maps, blue prints and floor plans. 
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Twin Cobra II (Arcade) Contra 3 (stage 2) (SNES) Hotline Miami (PC) 


A few Mode 7 games have maps in this view transformed in-game to simulate other views. 


ps 7s Top down 
dimetric — planometric oblique 19: 7 
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Paraline views 


These are views that give a three-dimensional quality on a 2D screen. 
This perspective shows 3 sides of an object, at al! times. 
Everything is in true measure and seen from a bird's eye view. 


Axonometric shapes” 


ISOMETRIC 45~DIMETRIC OBLIQUE 


Focuses on all planes Focuses on the Focuses on the 
(TOP + SIDES). horizontal (TOP) vertical (FRONT) 
plane. plane. 
Isometric means that Dimetric means only Oblique means the 
all axes are equal. 2 axes are equal. front is flat, the rest 
is slanted. 


*There are more axonometric views, such as “trimetric” so if you'd like more in depth reading, look up books by Francis D.K. Ching. 145 


Isometric view 


Isometric pixel art is often associated with diagonal movement, since the grid 
is diamond-shaped at multiples of 30° angles. However, 


2 
ae , 50 everyone uses stairs of 2 pixels. This is technically 
26.5°, but it’s the closest thing to 30° lines. Constructing worlds is much 


easier with this “2 pixel” method. 
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Top (L-R) : Landstalker (Megadrive), Final Fantasy Tactics Advance (GBA), Solstice (NES) 
Bottom (L-R) : Harry Potter 1 (GBA), Final Fantasy Tactics Advance (GBA), Kingdom Hearts: CoM (GBA) 


The unique aspect here is that , Not squares. 
This makes it harder to fit into square grids and align them. 


These tiles don’t align well in square grids but they're nicer for 
free-form pixel art. The area where the lines connect is clean. 


These tiles align perfectly and suited for game development and 
tile sets. Unfortunately the areas where lines cross each other are 
chunky (double pixels) and not so nice to look at. 
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Instead of using lines, it’s easier to use lineless shapes 
to indicate each diamond, like a checker board. Use 
this method to avoid chunky cross sections! 


One diamond is spread across 2 square tiles. 
Every other adjacent diamond is spread across 4 
tiles. 


Try making a checkerboard to practice! 


It doesn’t matter if you prefer tile sets or not. You will always need a grid to help guide you. 
If you use free-form backgrounds for games, you will have to turn them into a playable map. It can 
look more unique, but can be a nightmare to program if you have to turn it into a map. Make sure 
whatever you draw can have proper collision. 


Mee eet. 
A free-form isometric piece Guest The tiled isometric backgrounds of 
artist: Temmie Chang Luminous Arc (NDS) 


Within an isometric grid, you can build all sorts of items. Not everything has to be necessarily blocky. 
Cubes and cylinders can have a load of personality and come in all shapes and sizes. 
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Kingdom Hearts: Chain of Memories (GBA) 147 


Making objects | 


When making objects, you can approach them in two ways: 
You can eyeball them, or you can construct them. 


When you eyeball them, you: When you construct them, you: 
Visually estimate measurements. Will be slower but way more precise. 
Can easily deconstruct objects Use guidelines and get the most 

into simple geometric shapes accurate results. 


Sidenote: Eyeballing is only as good as the artist’s knowledge, it's advised to construct first so you get a good grasp of how to eyeball. 


With just a simple cube, you build all sorts of objects! 


A cylinder can be turned into a tree stump or a barrel. 


| | A pyramid can be turned into a roof or a tent. 


A cone can be turned into a tree or a tower. 
Ll A sphere can be turned into a mushroom or a bowl. 


Draw the medians. Oval around the square. Draw the circle within. ... and voila! 
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Drawing a circle on a vel 
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Converting sprites to an isometric 


“©. +@ 
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ap Have your side scrolling sprite ready (use lines to guide you if needed). 


@ Skew it by 30° (0.5) 


@ Adjust the sprite by moving parts around to add more depth. 


Clean up and fill in the gaps. Fix any remaining mistakes. 


i Why 87% ? 
Rotate 45° height 2 at 


a-@ 2 


: skew -39° 
8796 width vertically &Y 30 


i | a t 

= Cos 30°= about 0.866/1 
s7% width =, Skew ty by +30" 
| th 


Terrain 


Most isometric fields have flat areas. You can have different altitudes, but you'll often have 
cubical platforms, towers or plateaus. Flat terrains are the easiest to program and draw. Not many 


2D videogames have slopes. This example below from Kirby's Dream Course is a good reference for 
isometric slopes. 


4044 
406065 
sOOQNEG 
1060901004 
104460040¢/ 
10666694664 
10976 00406 
1964600060 
16000@44/ 
Td 
446/ 
Y) 


YOWRS¢/ 


In grid based RPGs like Final Fantasy Tactics Advance 
2, these slopes will only appear in 4 directions since 
the game-play only has 4 directions. 
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45° Dimetric | 


1 This is a very uncommon view. It works well if a map has high structures 
that you don’t want your artwork to get in the way of gameplay. 

The same techniques of isometric art apply, but instead of 30°, only 2 sides are 
45°, so essentially your guidelines are series of single 1x1 pixels. The vertical axis 
is 90° but the other two are 45°. 


< ‘ 
Saas == Los wy } 


L-R: Earthbound (SNES - Fourside ONLY), Boktai 2: Solar Boy Django (GBA), Nox (PC) 


This view is sometimes considered , because the top plane is 
orthographic. It doesn’t look like an oblique view, until you rotate it! 


Other names include axonometric oblique, or plan oblique or even 
iL 


military oblique and commonly planometric oblique. A notable example 
is Sim City, on the SNES. 


2 


Oblique | 


The front planes are orthographic, so flat and without perspective. 
However, all other planes slant towards the side, and remain parallel. Usually, 
they are slanted 45° but occasionally it can be 2x1 lines. 


Think “side-scrollers + 2 more planes’. 

The front planes follow the orthographic rules of a 90° grid. 

The top and side follow 45° grid lines of 1x1 pixels (but sometimes you can 
have 2 x 2 lines or 3 x 3 lines). 


w 
P95959)2) Mey 
ESSE LURERESEEER ELISE 
“anton, LEURERNA? 


aa 
Biers 
yey 
Ms 


ce? 


y Cakewiartare 


gf 


ee ee 


L-R: Earthbound (SNES), Double Dragon II (NES), Pacmania (Arcade) 


If you're struggling with this view, you can use the skewing technique (mentioned previously on p.17) 
to turn top down maps into oblique ones. Simply slope the map vertically by 45° (or 1 unit) instead 


of 30°. 
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True Perspective 


Pixel art that isn’t used for games generally follow the rules of regular 
art, perspective and painting. 


L: No vanishing point, 
all equal size. 


noe i = R: True perspective 
ES | with vanishing point. 


An object seen from a top down angle will also obey the normal rules of perspectives and has its 
Shape skewed towards a vanishing point. No matter what viewpoint, the lines will be skewed. 
Games that have 3D environments with sprite textures can be manipulated to look like a traditional 
top-down view. This example below is from Pokémon Black/White (NDS). 


Original graphics. Orthographic version (by user GuyPerfect). 
True Perspective isn’t unique to - anes. In game illustrations can easily imitate perspective. 
fen 
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154 Cyberbots (Arcade) Real Bout: Fatal Fury 2 (Neo Geo/Arcade) 


2D games can have a perspective view, but it requires sprites to grow bigger and smaller in size as 
a result. It usually takes too much time and energy to do this manually, so newer games use their 
engines to resize sprites automatically. 


Vanishi 
erred 
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Indiana Jones and the Fate of Atlantis (MSDOS) 


Here are some games that feature scaled sprites, manual and/or automatic. 


Saga Frontier (PS1) 


The World Ends With You (NDS) 


To further understand how 2D views trick your eye, 
here’s some behind the scenes of 3D games that imitate 
top-down views. 


During an Iwata Asks about The Legend of Zelda: A Link between Worlds (N3DS), the director 
Hiromasa Shikata and his team reported that they went through a lot of trial and error with the top- 
down view. With this perspective in 3D, you don’t actually see much of the character's face, but just 
the top of their head. You would have trouble telling it was the playable character Link. It was later 
revealed by Eiji Aonuma (producer of the series) that many objects in the game were set at an angle 
to improve visibility. 


A true top-down view actually has lots of problems. 
If you make it truthfully, it doesn’t look interesting at all, 
So you have to fake it - but in a good way. 


Satoru Iwata 


This technique isn’t something new to game 
developers. It’s been used in older games such as 
the Pokémon on the Nintendo DS. This example 
shows that the fences and trees are made of 
sprites set at a 45° angle. 
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Clarity Issues 


In Chrono Trigger on the SNES (and later on the PS1 and NDS), you travel the world in a top-down 
view. In the later portion of the game, a flying ship known as“ The Black Omen” appears and floats 
over the land. The shape of this construction is quite peculiar. 


looks like a looks like a Pee 


original tall tower long aircraft 


tall tower long aircraft 


The actual ship was 
never shown outside of the overworld and 1 battle screen on the 
deck. The ship is only visible from 1 angle (the front). 


The easiest way to avoid any confusion is by simply 
. With simple adjustments, it can no 
longer be mistaken for a tower. 


Remember to ask for feedback from others to avoid readability issues! 
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Using guidelines 


When you build an isometric scene, use a grid and guide lines to aid you. 
You can sketch it out in a different program first, or simply go directly into pixel art. 
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' leaves! 
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This isn’t just a tutorial on how to draw trees. The point here is to deconstruct 
158 shapes and help them guide you. You can use this for ANY PERSPECTIVE! 


Showing scale 


Most projections show the game world from a bird’s eye view. 2D videogames usually have you 
look into a shoebox from the top, or from the side as they are the easiest camera angles. However to 
show a sense of scale requires thinking outside the box. 


Why are there no low-angle shots and only in cutscenes? 


In low-angle shots, it’s near impossible for the player 
to know where they are walking. It’s manageable in 3D 
since the player can easily move the camera back down. 


In 3D games you see low angle shots in Shadow of the 
Colossus (PS2), as the game is setting the mood and 
showing a sense of scale. This technique are more of a 
story telling device, so in 2D pixel art games you'll only 
see them in cutscenes. 


LoZ: Minish Cap (GBA) 


GBA 


You can use Mode 7 to scale up... ...0F spread graphics across 2 screens. 
SMW2: Yoshi's Island (SNES) Super Metroid (SNES) 159 


Conclusion 


The way your audience experiences your world is a pretty big deal. 


With games, the projection you use will end up defining the player's experience. Don't feel limited 
by the 7 projections discussed in this chapter. Remember that the player will look at this view of the 
world throughout the whole game. With illustrations, feel free to draw in any perspective you want. 
You have more freedom but you still have to follow the basic rules of perspective! 


Quick info Types of views Extra info 
Introduction Multiview drawings Clarity issues 
Orthographic projections Paraline drawings Using guidelines 
True perspective Showing scale 
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Introduction 


Clean-up describes all the finishing touches and possible improvements. Even when you think 
you're done, there can be a few adjustments you could make before calling it a day. 


Roughs Clean-Up Complete 


By guest artist: Yaa 


If you are creating a video game, or simply 
making pixel art for leisure, you will most likely 
\ get feedback on your work. This may come in the 
form of tips or advice on how to fix certain things. 
It is important you also self assess your work, in 
) addition to others evaluating it. 
You will grow more as an artist as a result! 


If you'd like to catch up on clean up tips, have a look back and check: 


Introduction Anti-Aliasing oaur™ Readability 


So Where Do | Start To AA or not to AA Picking Colours | ...Dut Pixels Matter More 
“Old School” Hardware Jagged Lines Picking Colours II Silhouettes 
Banding Light & Shadow 
Spacing & Tangents 


le? More clean up tips will appear in the subsequent chapters! 


From rough to clean 


4p -“ Some video games leave unfinished graphics in their data to use as 

“ g place-holders. It gives an insider's look at each artist's method. Try 

v } : . ° I 

ae wa to recall the diagram back in the Introduction Chapter and let's 
» ) > Z ! 7 


take a closer look at them. 


Aad 


Shape « Refine « Finish 


In Pokémon Black2 & White2 (NDS), this robot has an 
early beta version. The method used here seems like 
a mix of line work and shapes. Body parts have been 
moved around and the head has been shrunk. 


In this example, the image has been 
redrawn once or twice at different sizes. 
The pixel art also underwent a few 
colour changes. The line-art here is 
sculpted and then refined at the end. 
Pokémon Black2 & White2 (NDS). 


Sprite by Michafrar, By guest artist: Yaa 
character by Nintendo 


These sprites were very rough in their early stages. They are in-between frames of an animation. It’s 
easier to use blobs of colours for in-betweens. This way, you work more with 
light & shadow, and less with lines. 163 


Lines - Colours « Finish 
Use a very rough sketch, and then finish it in pixel art. 


Dudley from Street fighter III (Arcade; Dreamcast) 


In JoJo’s Bizarre Adventure (Arcade, DC, PS1), 
there is data of unfinished sprites. This game 
(like most other Capcom games) creates its 
graphics by digitizing paper drawings. The 
final version is simply shaded. There were 
quite some more changes made in the line- 
art stage. Some changes were subtle, others 
were completely different. 


Early version Final version 


The final result can look completely different from the first line-art. 
Don’t worry if your work changes from your original sketch. 


ed 
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These sprites of Petshop and Zangief have seen multiple changes. 
Both their heads have been greatly cleaned up during the shading phase. 


Jojo's Bizzare Adventure (Arcade; DC, PS1) and Street Fighter Alpha 2 (Arcade) 


When there isn’t much room for lines, artists don’t rely heavily on the line-art. 
With pixel art, it’s common for the final version to look completely different 
from the sketch, as you can see with Zangief. 


Line-art is primarily useful when you are building a geometric structure. 
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By guest artist Cocefi 
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Adjusting your sprite 


You can always make improvements in the same art-style. In the Mega man X games on Super 
Nintendo, the protagonist has no changes made to his default sprite. However, the character 
Zero is given brighter colours, improved stance, silhouette and cleaner shapes. 


Art is subjective. Everyone has their own favourites. 
Not all changes are necessarily improvements to all of your audience. 


=. As you probably know, design 
changes are also made to suit 
bi tastes. We won't be discussing 


hy = Se these however in this book. 


Magical Chase (TurboGrafx-16) Sonic 3(Beta) (Sega Megadrive) 


Things to look out for when adjusting sprites: 


Gt 4 


Silhouette Design Colours PixelShapes Lighting Readability 


THESE ARE NOT A CHECKLIST. We'll be using these examples for ease in the following pages. 


166 There are more than just these aspects beyond this book. 


Bonewalker from Fire Emblem: The Sacred Stones (GBA) 


The bigger skull size allows 
more space for details and 
subpixels for the eyes and 
mouth. 


The palette isn’t much 


different, but the high- The stances of each pose are less stiff, more 
lights and shadows are intimidating. They have more personality. 


more pronounced. 


Frostwind boss from Drawn to life (NDS) 


A new dark line outlines the 
dragon’s cheeks. They now stand 
out more. The old version had 1 
big shape of indigo which isn’t 
a bad choice, though. 


The colours are more vibrant. 


Examples from Video Games 


Adjustments 


a) 
ay aN 


The sword is more 3D and 
makes the silhouette more 
readable. Same goes for 
the cloth around his pelvis. 


B Be 


The silhouette is easier 
to distinguish and 
much wider. 


Adjustments ®) a) 
> T 


With only 1 pixel difference the 
pupil looks smaller. That one 
white pixel is quite a change. 


A darker shadow outlines the 
mouth. It’s much sharper. There's 
also some A-A to soften the line. 
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bh | 
Barry from Pokémon Platinum (NDS) Adjustments , 4 


Diamond/Pearl (2006) — Platinum (2008) 


ee OR 


The face got a complete re-do. The right eye is cleaner and Barry's new silhouette is 

the eye socket is now 90°.The smile is wider and is more closer to his model sheet. 
distinguishable from the nose. The jaw now has His legs and arms stand out 
anti-aliasing and a smoother outline. more and his hair is spikier. 


The hands are smaller and more readable. 
The shapes of similarly coloured pixels are The 2008 sprite includes details that are 
cleaner too. Much more simplified. more accurate to his model-sheet. Not 
just the stance but also hair, and collar. 


% & 


finial 


aianeiite 


Pokémon sprites in general are a great example of adjustments during development. 
168 


be | 
Knuckles the Echidna’s goal sign (Sega Mega Drive) Adjustments 4 | y 4 Q | 


+ 3) ; Sonic & Knuckles 
Sonic 3’s Prototype Sonic 3 & Knuckles isceadl ORIG SOnIe > 


Between these versions, the only big difference is seen in the right portrait. The left and middle ones 
only have differences in highlights and hair shape. The middle one (used in the final game) has a shiny 
reflection in its eye. The eye is much sharper too. Remember that 1 pixel can make a difference. 


For some reason, the Sonic 2 sprite of Knuckles has red dithering around his mouth. 
This doesn’t read well at all and looks like random noise (stray pixels). It looks 
fine without the red pixels, and doesn't really need dithering. 


be | 4 iss 
Drill platform from Pulseman (Sega Mega Drive) Adjustments 4 | , 4 re 


Using different lighting 


[ol makes the object appear 
more 3-D. 
The outline is shaded too. 
— = The edges are rounded as 
well. 


The shading in the old one 
didn’t respect the light 
source. 


we _ x In the new one, you can see 
BS the platform cast a shadow 


! 
onto the red piece. 
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At times, clean-up requires a little pixel precision. This 
is where shape language comes into place. Pixels of 


the same colour into shapes. We 
will call them . Others call them i 
1 va 1 etc. 


Puyo-Puyo (Super Famicom) 


If you're familiar with the Puyo-Puyo games, try 1) 
to imagine pixels like puyos clumping together. © AaN 
This happens when puyos of the same colour are Ce BS 
next to each other. Maybe try seeing them as Rock Ly y 4 ro 
Climbing chunks. It’s a far-fetched comparison, 

. € 
but it could be helpful. 


is very to pixel art. Vector art is made of geometric shapes that 
can be scaled infinitely. The shapes have no blur and can all be edited freely. 


Vectorized portrait from 


Metal Gear Solid 3: 
Subsistence (PS2) 


MGS3 (PS2) 


It’s as if every block of colour is 1 mosaic tile. When these shapes are clean and well 
crafted, they will make your sprite a bit more readable! 
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Another art-form which is all about shape language, is Woodblock printing and Linocut printing. It 
focuses on juxtaposing silhouettes or shapes. Some elements of Notan imagery occur in woodblock prints. 


These prints use carved blocks of wood to print , 
silhouettes. These look a lot like stencils you * | 
would see in graffiti. When you layer several shapes 
over each-other, you obtain a fully coloured picture. 
This art-form is popular world wide, but is especially 
prolific in Japanese and Asian Arts. 


A final comparison we can make with art using shape language is based on notes from Walt Stanchfield’s 
Disney Drawing Classes. \n these notes, he talks about the term “lazy lines”. 


While talking to Dan Jeup one day, he mentioned “lazy lines’. 
He was referring to lines that didn’t describe anything, 
Things like shape, texture, softness or hardness. 
It’s like what you get when you trace some-thing, an overall sameness of line. 


Walt Stanchfield 


You say, now | am drawing the bridge of the nose: \ Now the top of the nose : i. 


Now the front of the nose : =) Now the part under the nostril: ) 


; \ 
Now the back of the nostril : Now the top of the nostril : . ( 


Those are all separate parts of the face and must be kept in mind as you are drawing them. 
If you think of all that as being just one big shape it will end up as a lazy-line drawing: 


© 


Now | am drawing the top of the cheek. The 
part nearest the nose and the ear try to stay 
put, so you get a bulge of loose flesh between 
two ends that trail off to where they are 
attached more firmly. 


Lazy lines would not spell out all that action. 
They would simply be there, not describing 
what is actually happening in a realistic manner. 


25 
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This may be about lines, but it’s relevant to shapes and shading too! 
The same idea can be applied to paintings and of course .. .pixel art! 17 


Just like with high definition art or traditional art, it’s more akin to 
how well you apply brushstrokes and how it all pieces together in your final piece. 


See | 
Lemmings (PC, Amiga & more) 


Cleaner shapes convey the most 

information and will often look better. The PlayStation may have 
The graphics in Lemmings (left) are noisy more advanced graphics, but 
and the graphics in Castlevania (right) when reduced to 5 unique 


colours, these rocks will  § 
are clean cut. When you make textures, STILL look more convincing, 


This shape language doesn’t rule out 

Anti-Aliasing. In fact, A-A can help 

improve your shapes slightly! 

A-A will not be your saving grace, 

though. It’s only used to soften your 

lines and shapes, so ultimately it’s all - 

about drawing skills. = : ae 


Shin Megami Tensei II (PS1) 


Castlevania X: Rondo of Blood (TurboGrafx-16) 


ia Dithered artwork is also made of shapes, with dithering blending the cell shading. 


GiEVcoiveven if you prefer 
detailed shading... 


.. just like traditional art! 


1portant for both 
rks. You can’t place 
ae of lightar ai stein without thought. 


The left tree trunk has 4 main shades and looks 
more like cell shading. The right tree trunk has 
up to 8 shades in its colour ramp and is highly 
detailed. 


Mother 3 (GBA) and Alundra (PS1) 


Getting the hang of this is just like regular drawing; it happens over time. You'll see how certain pixel 


placement can convey light and shadow better than lines can. 


If you're really interested in the concept of defining Sf check out this series by Marco 


MINUTES 


“U B BETTER} PAINTING 


Title: Good Shapes - 10 Minutes To Better Painting - Episode 4 
Preview video: youtu.be/-ZknWKTpc90 


Fixing the shapes of your pixel art is also subjective as each artist has their own preferences and 
hypotheses. It’s highly encouraged to learn from others. If you're interested in the nitty-gritty, 
be sure to give the Pixelation.org community a look. 173 


Multiple versions 


Before you finish a sprite, you may not be entirely 
satisfied with the final look. The final step can 
sometimes feel like a roundabout. You might 
have to walk around in circles before finding the 
right exit. By making multiple versions of the same 
sprite, you can pick your favourite version. 


In Chapter 4, we discussed how a single pixel can make a difference. 
Changing some pixels won't create a huge difference, but they can still have a subtle effect! 


RS SS 


by Michafrar 


When you aren't sure what looks better, create multiple versions and have others vote 
on their favourite. If you're alone, take a break and compare with fresh eyes to pick one yourself. 


s 4 


With little space, it can be tricky to pixel exactly what you want. Keep trying until you get a decent 
result. If nothing works, try to think outside the box and start fresh. 


By guest artist: Steven McCarthy 


It’s not always about the little differences. Not too sure 
about the entire sprite? Try doing multiple sketches so 


you can get a feel for the posture or the mood. 
By guest artist: Shawn Martins 


174 


The Selection tool 


sae U Instead of redrawing pixels from scratch, you can select areas 
oO \ of your drawing and move them about. This can save you a lot of 
\ \ time. If you draw or animate digitally, you must 
\ \ 


\ 13 bealready familiar with this tool a 
ve = The lasso tool can also be useful, but sometimes it’s too ‘oh 


sensitive to control. Make sure the lasso tool is aliased! 


by Michafrar, character by Nintendo 


You can move parts around and modify your sprite. 


If your work isn’t on-model, you can make simple changes with the selection tool. This seems quite 
obvious, but don’t forget this tool exists. Remember to tweak and fix things as you go. 
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You can easily fix things at any time, and move parts around: 


even more 


fill gaps I 175 


Here's an example of a sprite that was improved by using the selection tool. 
Both these sprites were made by the same artist (Michafrar). 


Before After 


eye Ipx left mouth lowered 1px 


reduce the size of 
the top of the eye 


hair outline+ : : er 
added eyebrow Shading and A-A + Subpixeling 


aaa 


So how does one make those subtle changes? 


Sub-pix 


Tm the | st 


changes can improve your sprites, 
Look forward to it in Chapter 8. 
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Scaling & Rotating 


ae, i, 
$b th 
a y : WL 
4 y | ] 
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When you're tasked to shrink a sprite, you have to sacrifice details and pay more attention to 
readability. Have a look back at the chapter Readability and the pages “Size Matters...” 


When you simply resize the sprite, you'll end up = cx € 


with a pixelated mosaic. Looks quite messy! It 
You'll switch between the eyedropper and pencil tool a lot! So make good use of them. 


looks like a lot of work, but you can totally 
clean it up. Use the resized mosaic as a base, and 
os resized 


redraw important features and lines. 
o cleaned up 
manually 


This is one of the best exercises to intuitively learn pixel art. 
Modifying shrunken sprites will make you think twice about pixel placement. 
Try doing it yourself! It’s good practice :D 


The same clean-up can be performed on enlarged sprites, but it will be more of a drawing task. 
It’s often better to start big and go smaller, than the other way around. 


freely ae 
original = resized 


a 2-3 2 


by Michafrar 


original 10% cleaned up 
se o« 
a ECE CCE CCE 
By Cocefi 


However, clean-up is more often used for rotated sprites. You might rotate body parts or backgrounds 
more often than resizing them. The process is the same: chisel & add pixels as you eye-drop 
& redraw over the sprite. 


original rotated in = ppatated using 
Graphicsgale in dseprite —(Motsprite 


THER, 


cleaning up lines and shapes 
178 Sprite by Guest artist Don. 


Sharpn 


Got to stay sharp when you're a tiny sprite! Sharpness is more 
than just how fuzzy or clear an image is. Colour, contrast and 
shapes also play an important role. If you use a “sharpen’ filter, you 
can see how the colours and shape of an image are affected. However 
we're here to do it manually. So no filters. 


Only apply the advice on this page if you feel like they're necessary. Here are some 
methods to keep your sprites sharp and readable, even from a far distance. 


CE Play with more light & shadows, don’t rely too much on line-art 


eBRE ts 
ee *ee*® 


pixel vector upscaling 


hand2 


% 


Hand 1 was be drawn with line-art, but it created unreadable splotches of colour. It’s easier 
to tell objects apart using clean shapes of dark and light on Hand 2. Higher contrast also 
makes it more readable! 


2 ; Add more highlights 


= By Cocefi 


Ge Add darker lines to make things pop 
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Various possible tweaks 


Jackie Chan’s Action Kung Fu (TurboGrafx-16) 


Without adjusting any pixels, you can change the contrast in colours. You simply do this by recolouring 
every ramp of a colour palette or by using colour sliders and then manually fixing them. Keep in mind: 
Contrast can be mood, hue, saturation and values. 


> Oil y 


This is the same principle seen in tutorials about comic books and storyboards. Tangent outlines can 
stand out. If you use this in animation, you can get away with this, so don’t worry about those instances! 


© -; 


Touching up colours is usually not enough, you must also consider the following: lightsources, 
highlights, shadows, areas. You will have to play with shapes, light and shadows to make the 
necessary fixes. 
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Character modelling & details 


2 -& 


Sprite by Michafrar, Character by Nintendo 


Changes can also involve referencing character model sheets or how designs are constructed. If you're 
adding/reducing detail it’s always good to have source material to make judgement calls. 


With the selection tool (or lasso tool), you can 
easily move parts around. Pixel art is easy to edit, 
so the proportions of a drawing can be fixed even at 
the very end! 


When the perspective on your sprite doesn’t look right on your first try, you can always use the 
selection tool and edit parts. With this adjusted barrel sprite, you see more of the top lid, and less 
of the cylinder. To ensure the objects you draw are within the same perspective, simply place the 
sprites next to each other to spot any mistakes or differences. 
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From start to finish - | 


For this sprite, | had to be time-efficient and decided 
to start from a drawn sketch. From there, | shrunk it 
to pixel art size. One sketch to get the personality 
and feel right, then another one to create cleaner 
line-art. 


Instead of going straight to line-art, | will tackle this 
Sprite area by area. Let’s begin with the coat. 


No matter which method you use, the process is usually: 
Flat colours - Shading - Details 


| didn’t outline the face, because the canvas size is so restrictive and there is little room for detail. 
So just in case | keep the sketch on a layer. The hands are big enough, so it was possible to outline. It’s 
not often you can pixel every single finger. 


| made the corner of the eye more defined. The face takes a few tweaks to get right, though. 
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Sisiciels 


For this sprite | made multiple versions of her smile and decided to go with my favourite 
(which was mouth closed). Check back on the Multiple Versions section of this chapter! 


In these final stages | decided to tweak the colours within the line-art to give a better sense 
of contrast, while also adding detail to the bottom of the image. With lighter line art at the 
bottom, it implies a sense of line weight that can be hard to see with a pure black outline. We 
look at this style of outline in Chapter 1! 


To make the outline pop out, | added darker pixels to make it sharper. This ties into the 
Sharpness section of this chapter. 
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From start to finish II 


a 
Fay 


~ Shawn Martins 


If you're used to sketching on a small canvas, you 

can directly make a rough sketch with the pixel 
brush. Once the sketch is complete, the base colours 
are laid out over the sketch. 


They generally start by detailing one area, 
in order to establish the style, colours and 
lighting. Nothing is permanent, though. This is 
apparent when looking at the changes made 
during the process. 


The legs went through multiple changes. Many different versions were made to make the pose 
more dynamic. As we've seen previously, it’s quite common to try out different designs before 
settling for a final one. 


na 


Once the legs are complete, more details are added to the rest of the sprite. Once in a while, the 
artist goes back to adjust previously completed parts. This involves moving parts around with the 
selection tool, and redrawing parts from scratch. The necessary changes are up to the artist's judge- 
ment. Once they are satisfied with the final look, the sprite is complete! 
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Guest writer: 


Yaa starts a scene with a very rough sketch directly 
in pixels. The light source is set from the start. That 
way it’s easier to find colours the characters and 
objects, instead of starting from white and doing 
the background last. 


Here are a few specific parts of the artwork, 
step by step. 


= 


sketch silhouette shape + midtone {line} 


+highlight extra sharpness 
+midtone +shadow with darker shadow 


J [i Ms, 1 | je - FF, 4 ™” : 
thumbnail basic shapes detailsonthe — Smalladjustment + Shading 
with lightsource upper body —(faceismorereadable)  +AA / clean-up 


Thumbnail rough shape refine shape +shading +AA smoothing +shine +details 
+ dark shade 
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Conclusion 
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Drawn to Life (NDS) 


The process of “clean-up” may not strike you as an obvious task at first. It’s quite subtle in execution, 
but can make a huge difference. 


Clean-up in pixel art is similar to the clean-up in 2D Animation. They share same mind-set and 
logic. You revise the original roughs and literally clean them up by going over them again with detail. 


All these adjustments and changes happen at any stage of your work. 
All the techniques from the previous chapter play a role in clean-up. 


Most changes occur when you get feedback or auto-critique your work, at the very end. 
Don't hesitate to improve your sprites, even when you think you're done! 


Food for thought Tips and tricks 
Introduction Cleaner shapes 
From rough to clean Multiple versions 
Adjusting your sprite Selection tool 
From start to finish | & Il Scaling & rotating 
Sharpen 


186 Various possible tweaks 


Chapter. 


Subpixelinc 


Introduction 


Super Metroid (SNES) Metal Slug 3 (Neo Geo) Darkstalkers 3 (Arcade, PS1) 


You've likely heard of subpixeling. It’s often seen in idle animations and very subtle movements. 
Many golden era games used this technique. These graphics have inspired the artists of today. 


This is 1 pixel. A subpixel, but impossible This is also impossible 


The pixel is the smallest unit of resolution. We can NOT go any smaller, nor split pixels 
between two squares. So we have to pretend and find a way to imitate it. 


Subpixeling is an advanced and complex procedure. If you're having trouble, do not worry. 
It’s not always necessary, but it’s a fun challenge t o hone your animation skills. 


Sprite by Michafrar, character by Nintendo 


When you see this icon, it means the image has an animated version. You can open these animations 


and flip through the frames. They can be found in the digital folder that comes with this chapter. 
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ANIMATION 


When & How 


Subpixeling can be found in Ta 


Still images Animations 


For non-moving images, subpixeling is referred to as anti-aliasing and line weight. For animated sprites 
it is referred to as subpixeling animation. Both rely on the same technique to create illusions: 
anti-aliasing. In general, the term is used to talk exclusively about animation. Just so you know! 


* anon be neaSaidk PC,PS4,Switch) 


Iconoclasts (PC,PS4,Switch) 


NENG 


Metal slug attack (Mobile) 


AGG 


LOZ: Minish cap (GBA) 


Sonic Mania (Various) 


Easing in and out 


In order to accelarate or decelerate animations, artists space out their drawings 
within each frame closer together or further apart. This can easily be adjusted. It’s 
difficult to draw in-betweens closely together without unwanted wobble effects; 
to prevent this from happening, you subpixel the inbetweens instead. 


Idle animations 


When characters are idle, you can either choose to create bouncy animations, 
subtle motions — or a bit of both. Subpixels will get you that extra bit of detail 
you can't otherwise obtain by just free drawing or moving parts around. 


Giving life to still parts 


When you animate large movements, some parts may remain motionless. Giving 
those areas subpixels will help it stand out less. If you animate in high definition, 
you may be familiar with line boiling techniques to avoid having things stand still. 


Small resolutions 


When you have a canvas of 32x32 pixels or less, it’s harder to make readable sprites. 
Moreover, it’s even harder to create believable motions in such a tight space. It’s 
tougher to just move parts around. 


Wind effects, laughter, shaking, shivering, and staggering 


Movements where the characters or objects barely move can easily benefit from 
some subpixels. 
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Shifting pixels 


OU ae oe 


Pixels are like cups of water. We can pour some of the water into the next cup. It’s spread across 
2 pixel cups, but the total is still 1 pixel cup of water. This is one of the principles of subpixeling. 


The amount of water in a cup = the brightness of the colour. 
Moving the pixel % px ahead, turns the next pixel darker or lighter. 


When animating in subpixels, 


Value and Colour are carried over to the next pixel. 


A stray pixel like the example above rarely occurs. 
Pixels are always surrounded by other shapes, outlines, 
or backgrounds. What you'll get instead is this. > 


Sonic Mania (PS4, Switch, PC, XBO) 


Not every single pixel’s value needs to be shifted. Sometimes you can move over an entire pixel normally! 

You don’t have to necessarily move every pixel on the canvas as that could create banding. Some parts can 

remain still, without any changes. Animation and readability matter more than overdoing subpixeling. 
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the basic principle of subpixeling 


If cups of water don’t cut it, try seeing subpixeling as cups of coloured liquids, like milk and coffee! 


1 full cup can be poured differently, so you can have more liquid in 1 cup than in the other. 
Subpixels aren't always 1 pixels. They don’t have to be shifted over exactly 50%. 


You can also call this technique swimming pixels, pixel transfer, or even pixel bleeding. 
Maybe try viewing subpixels like ghost trails, or smears that smudge pixels as they move around. 


starting frame ASS Inbetweens — {[_EEGQINS ending frame 


a 


When a line or shape moves away, it can leave some AA behind. Like a shell of its former-self. It sometimes looks 
like a row of ghost pixels from the previous frame! Remember NOT to leave any light-coloured AA on the outline. 
You'll find more about this on the page “Motion” Is 


We've briefly discussed line weight in chapter 2, so feel free to refresh your memory. Subpixels 
allow you to do what you usually do in HD artwork. This type of subpixeling really is just AA! 


2 16 48 6 D 


Line width Thin edges Thin center & more 


15 2 


Wecanpovethatlhsti —— 1 

lighter when they‘e thinner, —=——H 2 ————— 

by shrinking these lines. 

Shape and edges become 
brighter in colour too. 


EE 
a : 


However, things only become brighter when shaded 
from dark to light. This means that the opposite happens 
when working within dark shapes. 


Conclusion 
Light backgrounds 


iS 2 


These examples should be clear enough to easily 
study! They have varying line width. Pay attention 
to the brightness (value) of all the anti-alias pixels. 


Mario & Luigi: 
Superstar Saga (GBA) 


ee 


| 


The thinner cracks in this rock end in lighter pixels. The deeper cracks use darker pixels. 


The Legend of Zelda: Minish Cap (GBA) 


It’s easy to mistake line weight for shading 


Oz) i They may look like lighter shading or darker patches, and that’s fine! 


In the end, the same anti-aliasing can be used for multiple effects. 


Adding and removing weigh 


In this zoom-in you can see how anti-aliasing acts like subpixels. Focus on the mask around the 
character's eyes to see the difference. Version X has a larger eye mask than Version Y does. 


oo a 
Co wee Gg! 


by Michafrar 


1 Top left eye has lighter AA in version Y, making the line thinner. 
2. Top right eye has a lighter row of AA subpixels in version Y. 

3. Bottom left eye has brighter AA in Version Y. 

4. No changed in brightness, but the dark AA is shorter. 


aT it i 7 dé a z i a. As we've seen many times before, every 


pixel can make a difference. Sometimes 


ae 7 we fe brightening or darkening the AA creates 
subpixeling and produces different results. 
Upscaled with waifu2x.udp.jp 
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Split pixels 


the equivalent 
Split pixels are pixels spread across 2 blocks. lasek 
The complete pixel can’t exist like this, so its value is 
divided into 2 pixels that each are 50% of its brightness. 
Let's put these split pixels to some good use. 


Ie 


by Michafrar If the lines were HD What you imagine What you pixel 


When we shrink these images back 
to their original size (1x), the results 
are almost identical! This proves that 


subpixeling matters. Try using split — . a a 


pixels for better line weight! 


In some situations, you can slightly 
add more weight (brightness) onto 
1 side of the split pixel. This is really 
just AA combined with split pixels. 


The Legend of Zelda: Minish Cap (GBA) 


There are often areas where split 
pixels can come in handy. They're not 
always necessary but can make for 
subtle changes. You can also see these 
split pixels recycles the colour grey 
which was already used in the palette. 


Pokémon Black & White (NDS) 
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Tricking the eye 


Here's some tricks or creating illussions to trick the eye. These are extremely subtle, mind you. 


Bending shapes . 


On this green vine, the diagonal part has AA placed in different corners. These subpixels push a 
shape into a certain direction - all while the outline is identical! Every pixel matters here. 


What your mind 
perceives: 


Skewing shapes 


The direction and placement of your AA 
can skew the shape in all kinds of ways. 


You are not likely to use this for still 
sprites, but it can offer extra subtleties 
within your animations. 


2 
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Thinning out shapes 


Horizontal lines can appear thinner 
than vertical lines and vice versa. 


This effect is so subtle that it can fon 


easily be ignored. 


The Legend of Zelda: A Link to the Past (Super Nintendo) 
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Selective Outline 


Selective outlines get often mistaken for shaded outlines with AA around the edges. 
That's sort of what they are, but they serve a different purpose. So why the broken outline? 


Coloured outline Selective outline Shaded outline 


leas 


Klonoa: Empire of Dreams (GBA) 
Selective outline is only used on layers that have a transparent background. If objects overlap in 
neutral coloured environment, they will look smoother with a selective outline. It’s all about context. 


These broken lines will most often 
look best on dark backgrounds. On 
a light background, they will often 
look jagged. 


If your object will ONLY appear 
on dark backgrounds, you can 
safely use selective outlines. 
In fact, it’s best that you do! 


Darkstalkers 3 (PS1/Arcade) 
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It gets tricky when backgrounds have both darker and lighter areas. This ball may look fine in front of the 
rock, as the selective outline blends well with it. These do not look particularly pretty in every situation. 


by Michafrar 
Overview 
Heavier 
selective outline 
Lighter 
selective outline 


e Make selective outlines that are fuller and less segmented. 
What you can do ww ' 
eeauniiinenee - e Avoid selective outlines alltogether. Use other outlines. 
, e Use hints of AA and apply them to other outline types. 


So what does subpixeling have to do with this? 


You can have lighter or darker selective outline for your sprites; it all depends 
a on the background, though. If sprites will usually be in dark environments, 
you might want to give them darker selective outline: shaded outlines 
= with darker pixels of AA to blend the edges with the background colour. 


It’s kind of like line weight in a way, but for outlines. 
It will prove to be quite useful animating 


ete these outlines with subpixeling. ete 
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Top: LOZ: Minish Cap (GBA) Bottom: Iconoclasts (PS4,Switch,PC) 


Ever looked at 3D animations with anti-aliasing turned off? 
With 3D renders in raster graphics you can easily see how 
the curves have warping pixel lines. 


Notice how, frame by frame, the tip of the head shrinks, as the character moves downwards. 


4 Sa a | sy - 
———_—s ———“" ee ee 
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Pikachu 3D model from Pokémon X &Y (Nintendo 3DS) 


So why does this happen? It’s because of how lines move around in mathematical graphs. 
Here is a close-up of a parabola. For the math savvy people: what's happening here is f(x): x” +n 


As the curve moves down, the tip expands. 
Pixels on each row escape to the sides. 


At one point the curve crosses a new row and 
new pixels POP UP and the cycle continues. 


In animation, jaggies aren't an issue because you only see them fora split second. However, when 
your curve pops a new row, or shrinks down to a lower row, avoid transitions to single pixels. 


Aim for at least 2 to 3 pixels when popping shapes and lines 


Subpixeling animation requires you to 


flip back and forth between frames to check how pixels shift! = =) 


This is the general rule for animating subpixels on lines, curves and shapes. 


MOTION Angle of sense 
Ee a the line 
=p 
i Angle of 7 SUBPIXEL To 


the line ™ SUBPIXEL 


; ee MOTION <= 


The direction of subpixeling follows the angle of the shape 
regardless of where the general animation is heading. 


eg. : if the angle is horizontal = subpixeling is horizontal 
if the angle is vertical = subpixeling is vertical 


You can see that this cape is curved horizontally, therefore it subpixels horizontally too. 
It moves up and down, but it subpixels left and right on occasions. 


Red Earth (Arcade) 


If you get confused, remember this trick with your hands. The thumb is the main motion and it moves 
independently. The other 2 fingers usually point in the same direction. 


Line 
Subpixel 


Motion 


Pixels can go up or down but also left and right depending on the angle. 
This works for full pixels or subpixels. Always focus on the angle. 


In the digital animation files (included in this chapter), you can see a 
200 collection of different animated shapes. Look for the “shapes” folder. 


The animation looks like it is going one way, but some areas move in the other way. 
It’s actually an optical illusion. 


po) 


This line moves down the screen ... or was it moving horizontally? 


Let's see how pixels warp in practice, by looking at this sprite from King of Fighters XII (Arcade, PS3, XB360). 
The 2D pixel graphics from that game were created with help from 3D models. Remember that this subpix- 
eling trick only works for drawings spaced closely together! 


\ = 


ok 


« 
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You can see the full body When we zoom in on the chest however, the lines, 
moving up and down. shapes and shading appear to be moving left and right. 


- 


A name that helps explain the perpendicular motion could be waving; as a 
wave travels up and down but also forwards and backwards simultaneously. 
Artists often have their own term for techniques, so feel free to give it a name 
of your own. It could also be called rippling. Anything that helps you visualize 
this technique will do it: swinging, dripping, sliding, you name it! 
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Anti-aliasing follows every movement in your animation. Subpixeling is pretty much sliding AA 
around to create the illusion of movement. 


the inside. When it bounces, the outline stretches 
as it goes up hich leads to new rows appearing. 


— i 
= 


aS | i This blob has a selective outline, but also AA on 
ey 
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Usually you can shift entire pixels for cel-shaded sprites with no AA. As you introduce new colours, 
you'll need to subpixel several colour ramps. You will often encounter anti-aliasing on edges of shapes. 


AGG 


This elephant sprite is full of movement; there is 
50 much going on! To make it easier to study, we'll 
take a closer look at just the ear of the elephant. 
There are a lot of colours and a lot of frames, so we'll 
simplify it with less AA to make it more readable. 


Metal Slug 3 (Neo Geo) 


Full colour — 5 frames of animation where the earflap moves left. 
pixels with what you already 


i § f if have. Any extra colours just make 


Reduced colours — the arrows show the direction of the subpixels. transitions smoother. 


It’s recommended to use as fewer 

Shades as possible when anti- 

aliasing for subpixeling. The ideal 

number would be 1 or 2 shades 

of AA. It gives you just enough 

shades to create nice in-betweens 
for your animations. 


There's no need to create new 
shades in your palette, 

for subpixeling! 
Even without in-between shades, 
you can still shift full, complete 


Subpixeling isn’t just about moving things back and forth. For these examples, search 
for Soldier A, B and Cin the animation folder that came with this chapter. Let's analyse. 


A Soldier A 


A Soldier B 


Nee Soldier C 


RR HE 


You can’t just pixel shift up 
and down three frames to 
make a character breathe. 
This result just looks stiff. 
Simple pixel shifts like these 
only works for in-betweens. 


It already looks better! This 
one is pixel shifted more than 
four frames and well timed. 
However, it’s still artificial 
looking if the character just 
moves up and down. 


The pixel shifting is offset and 
body parts follow an arc. This 
animation also eases into the 
extreme key frames. It slows 
down at the keyframes. 


AGG 


Not all pixels have to move to have believable motion. 


With just enough subpixels, you don’t need to animate every part of 
every frame. You can get away with some body parts not moving. 
Some pixels can shift, others can stay frozen or delayed. 


What matters most is the motion. 


Alien Infestation (NDS) 


Likewise, not every body part needs to be pixel shifted. 


Simply subpixelate areas that benefit from it. You don’t have to add it to 
the entire sprite. This Smasher Crab has subpixeling on its legs and belly. 
Its shell, however, moves normally like you would animate regular 
drawings. It’s duplicated for every frame and simply slides around. 


Metal Slug 6 (Arcade, PS2) 


Finally, how much you subpixel is up to you. 


Your characters can even have silhouettes that don’t move. 


For the most subtle movements, you can have pixels swimming inside 


x 


Iconoclasts (PS4, PC, Switch) 


the sprite and the outline won't move a single pixel. 
Everything happens within the outline. 


A few animation terms have started popping up in this chapter. 


To truly understand subpixeling, you will need to understand the basics of Animation. 
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Case Study: Capcom 


NAG Not all smooth animations need subpixels per se. Many animations 
from the Capcom golden age didn’t feature a whole lot of subpixels because 
of their large scale. Most of the movements are easily created by simple 
in-betweens and full pixel motion. However, there's often subtle 
motions with carefully placed AA, and THAT is where you'll find subpixels. 


Darkstalkers 3 (PS1/Arcade) 


Whenever these graphics had subpixeling, they were somewhat ahead 
of their time. It’s commonly known that Capcom animations were 
roughed out on paper first. Although the rough lines were digitized, it is 
unlikely these subpixels are a coincidence. This is just speculation, but 
by studying how line art is digitized in pixel grids, Capcom artists might 
have picked up on subpixel motions. These effects were totally intentional. 
Over at SNK Corporation, they even called this the “0.5 pixel” technique. 


JoJo's Bizarre Adventure: Heritage for the Future (PS1/Arcade). 


Notice how his chest moves up. The angle of the lines/shapes are horizontal which means the subpixels 
grow horizontally, despite the chest moving up. 


You can see different subpixel techniques in the same sprite. 
Not all motion is the same. 


1. Chest (breathing) : pixel shifting + popping rows 
2. Secondary motion (Wind): AA waving back and forth 


secondary motion breathing JoJo's Bizarre Adventure: Heritage for the Future (Ps1/Arcade). 
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Readability 


The viewer usually focuses on the face or the eyes ofa character at first glance. 
It’s best to avoid subpixeling the facial features. If the eye shape morphs too 
much, it will stick out like a sore thumb. If you do subpixel it, it has to be 
extremely subtle. 

Owlboy (PC/PS4/Switch) 


When your character only moves by 1 pixel, it’s still possible to pixel shift 
faces, but the inbetweens will look very blurry - even at fast framerates. 


444%4%4% 


Metal Slug 1/2/X (Various) 


You can shift pixel values on in-betweens that appear on screen rather A 
quickly. It’s fine ifthese in-betweenslooks funky. Afterall, theyappearon screen for 
only asplit second. What you DON’T want to happen is having these frames appear 
on screen for longer.This means animating pose-to-pose in subpixels isn’t always 
guaranteed to work. Animating straight ahead is often easier. This entirely 5 ,,.Tegenaot Zelda: 
depends on how confident the artist is. No matter what technique is used,  '"° Mins cap (GBA) 
you create subpixeling by duplicating frames. A good solution is to have inbetweens “favour” keys, i.e. 
much closer and similar to the keyframe. All of this will be detailed in the next chapter: Animation. 


al An easy way to keep things consistent is to: 
have multiple frames where the face shifts betweens 2 positions, 
but the head, body and everything around it pixel shift. 


Scott Pilgrim vs. the World: Iconoclasts 
The Game (PS3,XBLA) (PC,PS4,Switch) 


‘my, 


The chest and shoulders 
shift by 0.5 pixels, 
but the head does not. 


Megaman X4 (Sega Saturn, PS1) 


If we were to subpixel the face, 
it would not look very readable. 
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Advanced pixel shifts 


Here are frames #7 and #8 of this animation of Aladdin 
throwing an apple. Frame 7 transitions into frame 8 with 
subpixels. This is a clear example of a diagonal movement 
of subpixels. The direction is 45° but it’s a combination 
of pixels being carried over vertically and horizontally. 


Aladdin (Megadrive) 


You can carry over pixels diagonally, but 
don’t overthink it. It doesn’t have to be 
mathematically correct. 


Just move the AA roughly towards the 
main direction. What matters is shifting 
and to carry the colours over. 


Wargroove (Switch, PC, PS4,XBO) 


What you want to keep in mind is a general sense of direction and arcs. The keyword here is GENERAL. 
You can have delayed motions or change arcs. The animation above loops and contains 6 frames. 
The subpixeling here follows a circular motion. This all happens inside an area smaller than 3x2 pixels. 


x 
Kf 


Sonic Mania (Switch, PC, PS4) 


206 


Intense pixel shifts 


You can get a better understanding of more difficult subpixeling by studying 
3D rendered sprites. A lot of the pixel placement is automatically generated, 
so none of this is hand-placed. So it’s up to the artist (and us) to untangle it all. 


3D original 


ABE 


Simplified 


It’s important to set up extremes: those are keyframes where motion starts and stops. 
The in-betweens frames are the ones where you'll have to fiddle with subpixeling. 


Sees 


extreme inbetweens extreme 


Certain 2D idle animations may look incredibly complicated or not even subpixelled 
# by hand. They're still worth studying. Identify the extreme frames first; 
figure out what direction the in-betweens shift to later. 


Some of these effects push pixel shifting to its limits. It almost becomes 
so artificial that some may have a hard time believing it’s handmade. 


More uses of subpixeling 


NRE Occasionally, animations have silhouettes that HARDLY move. 
If they do move, they will only move slightly. All of the movement 
takes place within the sprite. This means it’s impossible for you to use 
the onionskin tool in animation programs. 


Metroid Zero Mission (GBA) 


Shaking — Flinching 
Sleeping Laughing 
Wind effects Being stunned 
Flickering lights Shivering in cold 
‘ / “4,  Wobbling & jiggling Staggering motions 


Mighty Switch Force 2 (WiiU/3DS) 


You can’t always use AA when you work with few colours. Instead have full pixels swim inside the 
sprite. The principle is the same as shifting subpixels, but with full pixels instead. 


P2773 


Super Metroid (Super Nintendo) 


on 


Sometimes fully complete pixels travel across the sprite as if 
they’re swimming. You can still shift colours and pixels with AA 
but remember to use colours you already have within the sprite. 
Don’t create new ones unless absolutely necessary. 


Ash from Iconoclasts (Switch, PC, PS4) 


Look for“Ash” in the animation folder that came with this chapter. 
You will find a complete breakdown of every frame and all of the subpixeling. 
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Case Study: Owlboy 


Owlboy - released in 2016 - features the art and animation of Simon Andersen, a developer at D-pad Studio. 
Owlboy is a visual marvel, and features numerous examples of subpixeling. 
Let's analyse some of these easy (yet complex) animations. 


The idle animation for Otus has 2 key frames. 


Ais the lowest point of the idle. B is the highest point. These are the extremes. 
Other than being 1 pixel higher, frame B is almost identical to frame A. 

If this animation were a mere 2 frames long it would be quite choppy. 
Subpixeling is used to make this transition smoother. 


inbetween inbetween 


euRe 


The full animation has even more in-betweens. These are not straight “in the middle” in-betweens. These 
ones favour the keyframes A & B. They are much closer and identical to these key frames. 
This is called easing in traditional animation. We'll show this technique in more detail in Chapter 9. 


I’ve now included the straight in- 
betweens. Since the character 
only moves up by 1 pixel, it’s 
harder to fit in an in-between. 
That's why subpixeling is used. 
Notice how the nose changes shape. 


Oo 0 
Hq —Oon 


favoured Straight easing 


in-betweens in-between even spacing 
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Here is a full a of how the — is animated. 


straight 
ae beter ae mre 


tree BR BOOG 


Straight 
B ua A, 


‘one MOOR) 8B 


subpixel 
movement 


timeline 


upkeyvframe — inbetween down keyframe — inbetween 


Subpixeling only shows up in the smallest areas. 
This sprite of Mandolyne is animated in a regular way but still features subpixels. 


Notice how the button of her dress leaves a trail as it travels back and forth. 


The collar has z 
split pixels too! 


When her face tilts, carefully shifted pixels and anti-aliasing start to appear. 
It’s not known if a rotation shortcut was used by the artist, 
but it can be a useful trick you yourself can use. Take a look back at the chapter about Clean-up. 


+AK how it appears +AR how it appears 
Rotated — + pixelshift in-game Rotated = + pixelshift in-game 


A few more tips 


Outlines can grow extra pixels” 


Se Se 
(eR 


Fire Emblem: Blazing Blade (GBA) 


Sometimes you can add pixels or remove pixels 
I ; lt on round corners in order to make animations 
move even more. It helps you add extra move- 


ment to your sprites. Use this with moderation! 


Quick but cheap subpixels 


A quick but unreliable way to generate subpixels : 
1. Reduce and lock the colours of the sprite 
2. Resize 200%, no blur (nearest neighbour) 
3. Select all, move the sprite by 1 pixel (horizontal or vertical) 
4, Resize 50%, so it goes back to size 1x, but this time with blur enabled. 


Starting frame What a blurry mess clean-up 


SRE - ae - ae 


Wargroove (Switch, PC, PS4,XBO) 


Remember: Pixel art is about having total control over your work. This method is quite cheap, 
and will not work unless you manually edit it. It’s fine for beginners who want to understand pixel 
shifting better. It’s a good reference, however it does not guarantee an inbetween for animations. 


Subpixeling + Moving shading 


It’s very easy to mistake subpixeling for “animated shading” but that is 
incorrect. If you think it is shading that simply moves around, it will only 
confuse you even more. It’s about movement, not shading and light. 


Metal Slug Attack (Mobile) 


DO NOT overdo subpixeling 


You'll need to be really confident to pull off the most subtle motions. If you overdo it, things will look like 
they're melting or look like jelly. Moreover, subpixeling is time-consuming. Don't do itif you don’t needit. 
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Conclusion 


A By Michafrar 


Lee erererer 


Duplicate frames and shift pixels around. That's subpixeling in a nutshell. It is the only technique for 
small-scale inbetweens. It’s possible to create subpixeling by just duplicating and shifting a single sprite. 


It’s a technique where by slightly changing the colour of surrounding pixels, 
to the human eye it looks like the pixels move by around 0.5 pixels. 
Kazuhiro Tanaka 
Designer for Metal Slug at SNK’ 


Subpixeling is the least documented technique in pixel art. 
Knowing this fact, take every opportunity to download sprites you find and study them more closely. 
That is the best way to learn this technique. 


<—z 


~d 
Food for thought Still images Animation 
Introduction Line Weight Direction 
When & How Split pixels Motion 
Shifting pixels Tricking the eye Readability 
Selective outline Advanced pixel shifts 
A few more tips 


If you are just an illustrator, Pixel Logic’s section on line weight will be most useful to you. If you are an animator, you may have noticed 
some terms and techniques have been mentionned briefly. Feel free to give this chapter another read once you've finished the book or 
started learning animation. Things will start to make more sense when you already know how to animate. 
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‘Tanaka elaborating on the “0.5 pixel technique” used at SNK. from Weekly Famitsu August 9, 2018, n°1547, translated by Alistair Wong at siliconera.com 


=A J 


Animation 


Introduction 


Being a 2D Animator is like being bilingual: 
The two languages you need to know are drawing and animating. 
Add pixel art into the mix, and you've now got three. You're now trilingual. 


Animation is already a well-documented art form. 
Modern animation is far older than pixel art, by at least a whole century. The 12 principles of animation we 
know today date as far back as the 1930's. In this chapter we will focus specifically on game animation. 


Don't worry, though. We will give you a crash course on basic animation. 


As many others, my first advice is to acquire the following book: 


The Animator’s Survival Kit ©’ Richard Williams 


The reason this is one of the best books is because R. Williams 
breaks down the basics of motion and acting. | highly recommend 
the iPad version of the book as it features animated portions. 


Two of the animators that have inspired Williams are Ollie Johnston & 
Frank Thomas. These two classic animators wrote “Disney Animation: 
The Illusion of Life’. They are two of the Nine Old Men who established the 
12 principles of animation we know today, all the way back in the 1930's. 


These two books teach everything in terms of traditional hand drawn techniques, but the principles 
it covers apply to every form. If you want to improve at animation consider expanding your 
horizons. Don’t just stick to pixel art. Draw, paint and animate in other ways! 
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How to Study 


If you ever feel lost, remember that animation is the study of motion. This isn’t 
the textbook definition of animation but it will remind you what to focus on in case 
you struggle. This means studying the motion of creatures, objects and forces. This 
study will include both realistic and exaggerated motions. An animator is frequently 
studying real life, but also tend to find inspiration in previously animated media. 


Good animation relies on readable key frames. 
Strong drawings are crucial. 


lf your key frames are too alike, it’s harder forthe audience ‘ve Emblem: The Sacred Stones (GBA) 
to see what's happening. More in-betweens will not fix 
animation. No matter how smooth the movement is, the 
motion won't look convincing. Efficient use of key frames 
will allow for a more appealing animation. 
Pixel lread - d litt! f In the READABILITY and CLEAN-UP chapters, we saw 
Iixel art already offers you little to no space for joy, strong silhouettes are visually more impactful. 
in-betweens, so you need to play your cards right. With animation, this principle is even more crucial. 


=f 


It's important for your sprite animation to look good, but even foritto good. 


Be analytical. You will rarely find an exact step-by-step tutorial for 
something you need. It may sound quite unfortunate, but it isn’t. 
Body language, acting, expressions, styles; these are all great to study! 


When you find a reference, be it real life, a movie, game or animation: 
1. Browse frame by frame. 
2. Find extremes. These are key frames where the drawings are in 
their most extreme position, usually just before a change in direction. 
3. Use the extremes as guidelines. Draw the in-betweens and breakdown 
drawings yourself, rather than copying the exact footage frame by frame. 
4. — Stylize it (unless the poses are already overemphasized). 


By doing this, you deconstruct the way the motion works; helping you next time you animate something. 
2s 


Timelines in softwares 


Timing is the speed of the actions happening on screen. In animation this refers to how many drawings 
or frames are used to show an action. However, timelines are a bit trickier with different framerates. 


Animating on One's = every frame is unique, 1 frame is 1 drawing 
Animating on Two's = frames are doubled, 2 frames are 1 drawing 
Animating on Three’s= frames are tripled, 3 frames are 1 drawing 


... you can have fours, fives. The list goes on. 


Depending on the software or theme used, these will look different, but you will always recognise them. 


1 5 10 15 20 25 123 $4 8 6 7 $ 4 1 11 12 13 14 18 16 17 18 13 BO 1 Be 83 2d 
one’s SSO SCCCCRCRBSBSSBSCBBBEBEEEEEES 
Two's 2D Dp Gp Pp a ee ee es Gs Gs a 
Three's > > 2 GD GP a a 


Adobe Flash/Animate Aseprite 


5 = 
{ 


2 345 
AAA 


J 2 ee Se ee ae ay Timeline 1 | 
ARAAA : Cc: fp 

je ole fe oe ole fe twos 

Pe ee es ee i Trees 1 


Clip Studio Paint 


Aseprite (custom skin) 


However, 2D animation is never this constant. Frames are on screen for different lengths of time. 
Animation mixes one’s, two's and longer frames. 


Sprite by Danieru 


Aseprite GraphicsGale Adobe Photoshop 


4 (DSK <S >SROOSOE= _ 20ms Pro Motion 


With these timelines, you will have to set their length manually to turn them into two's or threes. You 
don’t extend their length by grouping the frames on a timeline, but by setting their length individually. 
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How fast drawings app 


©) Here are a few references to help both traditional animators and game developers. 


Ll 


For example, if you have “two's” at 24fps, they will feel like 12 drawings a second. 


Video animation standard | Game animation standard 


Le a, a, 
24 FPS | 60 FPS 30 FPS 
On e' 5 [.| 2 4 drawings per second 60 drawings per second 30 drawings per second 
Two's |. ol 12 drawings per second 30 drawings per second 15 drawings per second 
Three's 8 drawings per second 20 drawings per second 10 drawings per second 
6 drawings per second 5 drawings per second g 


The length of each frame 


The way different softwares denote timing can vary. To help you, here are the numbers you need 
to knowhowlong“ones”and“twos’are if you're used to” 24FPS" notations or“60FPS” gameplay. 


““Termsused at 24FPS sown, aE GQEPS Lengthingame 

/ 60 0.02 ** frame 
/ 30 0.03 * 2 frames 

on One's 0.04 24 / 2 frames 
/ 20 0.05 * 3 trames 
i 15 0.06 = 4 frames 

on Two's 0.08 * 12 0.08 5 frames 
/ 10 0.1 * 6 frames 

on Three's 0.12 * 8 / B frame 

on Four's 0.17 * 6 0.17" 10 frames 


Remember: These numbers are rounded up or down to make them easier to remember. 


0.01 seconds = '/, of asecond = 1 centisecond. Milliseconds are ee of asecond. 


If your software asks for milliseconds or centiseconds, then use the numbers here below. 


0.02 seconds 0.03 seconds 0.04 seconds 0.05 seconds 0.06 seconds 0.08 seconds 0.1 seconds 0.12 seconds 0.17 seconds 


milliseconds milliseconds milliseconds milliseconds milliseconds milliseconds milliseconds milliseconds milliseconds 
16 33 42 50 50 83 100 125 167 


Frame Properties GALE 2 e = é 
[4] Frame number: 1 Delay: ai O00 sec 7 a . al 
24 4 
—E ic) 
Duration (milliseconds): [80 = Fae 


Aseprite GraphicsGale Pro Motion 


v2\| // 


Key techniques 


Squash and Stretch | 


<p 
Darkstalkers (PS1 Arcade) 


This is the most intuitive one. Beginners know it well before they start animating. It makes animations 
livelier and shows the weight and motion of various creatures and objects. In fact, the bouncing ball is 
one of the first lessons animators learn to get the hang of squash & stretch techniques. The amount you 
squash & stretch depends on how strong or subtle the motion is. Another factor is how heavy and dense 
the subject is. Make sure you know when to stick on model, and ay lat) subtle 
when not to lose control. Keep in mind: you need to conserve {ay 


the mass of the object. If you squash something in height, you ay seviais 
need to stretch it in width too. In short: conserve the volume. Le 


Kirby Mass Attack (NDS) 
Anticipation 


Anticipation is the “SET” part in 
“Ready... Set... Go!” 
It's the moment you prepare an action, no 
matter how subtle or how extreme. You 
Qa) 


anticipation tell what you're going to do, and then do it. 


Phantasy Star Il (Mega Drive) 


Anticipation is crucial for limited animation. 
Sometimes one frame is enough. What you 
show to your audience is energy building up. 


“You don’t see, but you feel it” 


most often OPPOSITE 


Keep anticipation for videogames generally short or non-existent. 
If you want animations to play as soon as you press a button. If the 
animation is merely cosmetic or needs a wind up, be sure to add 
some nice anticipation. 
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Castlevania Symphony of the Night (PS1) 


This is also known as the passing position. A new key frame that makes the animation change its 
course. Think of it like alternative route or a mid-key frame. To get from A to B, you can spice it up! 
Take this scene from the live action film His Girl Friday from 1940. Actor Cary Grant is pointing. 
How do you imagine him to get from A to B? The quickest way would be to simply raise his arm. 


Instead, the actor changes direction and creates an arc with his arm. 
This motion makes his pointing feel stern, bossier. This is just one 
of many possibilities. You can have ALL sorts of breakdowns. 


breakdown key 


SIV IAGAF 


Alucard’s turning animation — Castlevania Symphony of the Night (PS1) 


SECOCC Raa 


Rescued Prisoner of War - Metal Slug (Arcade, NeoGeo) 


Breakdowns allow animators to add variety and unique traits to their animations. 
Instead of going from A to B, we go from A>X—B. In the Animator’s survival kit, the 
eighth chapter of the book talks about flexibility. Williams goes into detail about breakdowns! 


the Gumroad workshops and videos by Toniko Pantoja. 


Gumroad Workshop: 
gumroad.com/stringbing 


Preview video: 
youtu.be/wdPbiy-8BRo 


7))| 2, 


regular 2D animation. There’s no big difference at first. Cc Cc 
Easing means that the in-betweens favour the key frame. easing even spacing 


Easing animation in and out is exactly the same as with [| [| [| L] [| a 


To put it shortly: it’s acceleration & deceleration. Speeding up and slowing down. 


Street Fighter III (Arcade, DC) 


You can see that when all the frames are viewed at the same time, the in-betweens closer together 
are the ones that ease in and out. Slow-ins and outs are vital for good-looking natural movements. 


f ; Ca: - C) 


: Fy 


Easing and subpixeling 


When you decide to free transform and move parts around, 1 px is the minimum distance. The only aspect 
unique to pixel art is if you want to place in-betweens VERY close to the key frame, subpixeling is used. 


SBSISssseee ss 


Iconoclasts (PS4,PC, Switch) 


Slow in and slow outs with subpixels have key frames so close together. 
In fact, you can just copy paste the closest frame and modify it! 
Subpixeling is used for these particular frames. 


Timing chart: 
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If the previous animation timing charts are hard to read, consider the 
Aju gf following: In both instances, frame 2 favours 1, and frame 4 favours 5. 
i They're closer to eachother than to frame 3. When the spacing between 
= Sst both drawings is super close, that's when you'll need to subpixel. 


i | 2 3 4 
i: S45 1 5 


Frame A* is a duplicate of A but edited with subpixeling. This inbetween helps ease in or out 
the character into the keyframe. Likewise, B* is a duplicate of B but slightly pixel shifted too. 


Subpixeling will only be used for slow ins and outs, and for the most subtle movements. 
Rather than wanting to squeeze in subpixels everywhere, work on strong key frames FIRST. 


Ae 


Metal Slug Attack (Mobile) 


Moving holds 


Red Earth (Arcade) Key YS bins eee 


These are movements where the action stops, but the character slowly keeps moving as they hold 
the pose. Moving holds are extremely rare in pixel art, because it would exponentially increase the 
number of unique frames! More frames means more memory storage, so you will rarely 
see them in older video games. Consider this technique a way to ease in to the maximum. 


In the appendix you can find two versions of this moving hold animation. aA 
A regular hold is when the characters "holds a pose’. This isn't an idle animation 
but simple the character coming to a halt. Nothing moves, so it's your job to 


e @ emphasize other smaller parts moving on a body to keep it alive and moving. 


Sonic Advance (GBA) For more info on holds, check out the 'Follow-through" section. 
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Smears are in-betweens that mimic the effects of motion blur. q. ; 


Owlboy (PC,PS4,Switch) 


Elongated smears 


This is a stretched out in-between. They're 
used to show a blur of motion in a single 
frame. It connects two key frames together. 
These frames should not stay on screen for 
too long. They happen so fast that you can't 


: always tell they exist. They're a visual trick. 
Street Fighter Ill (Arcade, DC) Martial Masters (Arcade only) 


Fire Emblem Binding Blade (GBA) Owlboy (PC,PS4,Switch) Iconoclasts (PS4,PC, Switch) Street Fighter Ill (Arcade, DC) Owlboy (PC,PS4,Switch) 


It’s best to have smears animated on one’s at 24fps (or around 0.05 seconds). 


Multiples 


Smears with after images. They're an alternative version of ie a 
smears. These are smears that multiply objects. These work just as 
well as elongated smears. It’s up to you to feel what works best. 


- Marvel vs Capcom 2 
Boogerman (Mega Drive) 


They work better with looping oe than stretched smearsdo, 


OF OF iff 


Mario&Luigi Bowsers Inside story (NDS) Dragon Force (Sega Saturn) 


In chapter 5, we've seen games with dithered blurs on rare occasions. 
This method is now obsolete and would only work on CRT tube 
televisions. It’s not very efficient today, so try to avoid them. 


Z22 : The Mask (Super Nintendo) 


AG Street Fighter Alpha (Arcade, PS1) ove rshoot settle 


Overshoots are frames where the part you're animating goes past its destination, only to bounce 
back to the key frame. It’s a type of recoil, like a stretched spring returning to its default state. Richard 
Williams calls these “hard accents’, but in the modern industry we call this “overshoot”. Sometimes a couple 
of in-betweens settle the character back to the key, other times the overshoot snaps with no in-betweens. 


You can vary the impact. Sometimes it’s enough to have an overshoot that moves a body part by just 1 pixel. 
You may not see it, but you can feel it. 


Lat ¢ 


smeared 


keyframe 
overshoot 


Marvel vs. Capcom 2 (Arcade, PS2, Dreamcast) Mickey Mania (Mega Drive) 
Some overshoots can be combined with smears. Exaggerated overshoots use squash & 
This smear will reach further than the key frame. stretch. The entire body can overshoot too. 


Remember that overshoots don't just happen in two dimensions. 
Perspective always applies, even with 2D objects. &s 4 


Wild Woody (Sega Saturn) 


Overshoots help give your motions a nice snap or pop. 


S2S2e- 2 23 


Pocket Fighter / Super Gem Fighter Mini Mix (Arcade, PS1) 


Overlap & Follow-throug 


Overlapping action 


Some parts of objects or bodies lead all the movement. As it moves, 
other segments will trail them. One parts leads, the other ones follow. 


AAAAAS 


Overlapping actions are all the parts or objects that follow with a delay. When 
the action is complete, parts will keep moving. This is the follow-through. These 
effects apply to anything pulled by an outside force. This isn't a secondary motion. 


This character, Alphonse, has two distinct 

parts. They overlap at different timings. 

following part’ The arms and head lead the movement, 
(delayed) . é . 

while the torso follows with a slight 

delay. The legs simply don't move at all. 


leading movement 


Owlboy (PC,PS4,Switch) 


Overlapping motions can be more simple than the example above. 
It's best to plan out your animation first, be it simple or difficult. 


Always start with your leading action, 
and draw the following actions later. 


Metal Slug Attack (Mobile) 


et oe B. fe, 
ty er oe ee a8 oS AE FE 


Martial Masters (Arcade only) 


Overlapping pixels 


It’s easy to lose track of subpixeling, so therefore plan out your animation carefully. 


Furthermore, we can apply this 
animation principle to a tiny 
area with single overlapping 
pixels. When 1 pixels moves, the 
other ones take a frame or two 
to catch up. They are delayed. 


Freedom Planet (WiiU, PC, PS4, Switch) 


Subpixels can extend the animation as well. They 
can be used as overlapping actions in pixel form. 


Mighty Switch Force 2 (WiiU, N3DS) 


Rarer e 


Having to delay pixels will increase the frame count and gives the impression of more movement. 
Like subpixeling, it gives you more space to animate with. In fact it’s subpixeling with whole pixels! 


frame 1 frame 2 frame 3 frame 4 frame 5 


Let's call these 
delayed pixels 


Alternatively, you can extend pixels to bridge them together. However, this can 
stand out like a sore thumb. Always play back your animations to see if it feels right. 


frame 1 frame 2 frame 3 frame 4 frame 5 


poy 


Hw Let's call these 
stretchy pixels 


BBEBGSS 


By Guest Artist Danieru 


Metal Slug Attack (Mobile) 


If you'd like to animate 45° shapes with subpixels it's best not to have AA. 
It's much cleaner to have overlapping pixels.The frames by themselves won't 
have clean 45° shapes anymore, but the transition will end up smoother. 


TTI, 


If you have shapes with outlines or anti-aliasing, things will get VERY messy at 45°. 


ft i all al all al Ob Lo 


delayed pixels (AA) stretchy pixels (AA) 


Follow-through 


Follow-through 


Zero's hair follows through after he slashes. It reacts to his movement by settling back (Megaman X4 (Sega Saturn, PS1) 


Follow-throughs add extra movement to your characters and objects. They make 
motions more realistic. If you work with limited frames, they can also give the 


NRE illusion of there being more movement then there actually is. These parts 
continue moving after the action is complete, hence the name follow-through. 
This Batman sprite even has a little bit of subpixeling on the follow-through of its 


cape. It’s quite impressive for an NES sprite, but also uncommon. Follow-throughs 
Batman (NES) may require some subpixeling to get a nice smooth ending. This will help make the 
“settle” phase of the animation even more convincing. 


: anticipation 
ie a 
sh 


Metal ait Attack (Mobile) 


overshoot 


Follow-through 


Summary 


Overlap : DRAGGING Follow-through) :) SETTLING 


MainjyAction HeldidrawingleyActionjhastended 


Overlap Follow-through 
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The Four Methods 


Like in the introduction chapter, there are several ways to start a still drawing. Pixel animation 
however knows 4 methods used to get from start to finish. These methods are about how pixel 
art is built, more specifically the rough drawings for every frame followed by the clean-up process. 


\a WS} O°? 
Silhouette Recycling Start from Simple 
animation frames Traditional Lineart 


Of course the two (or three) methods of traditional animation obviously still apply to pixel art. 


Pose to Pose: planning your work with key frames, adding in-betweens to connect them. 
Straight Ahead: animating frames as you go, improvising your way through the timeline. 
Pose to Pose + Straight ahead: A mix of both methods 


Silhouettes are useful for large movements 


RS SS we 


By Michafrar 


The way you doodle your silhouettes is up to you. If you draw your silhouettes 
like a regular drawing, that's just as fine! This technique is more so about 
the shape than actually being a shadow. The final result is what matters. 


0] 8 i: & Silhouettes can also be blobs of flat colours. 
BS Say eo ve” Oleg” . “#. This technique works well to plan out your 
mn = op animation. This helps you keep track of the 
moss 7 uA 4 ‘ allie _ 1 
cat e. Ye e TY rid An} colours on your character early on. You can 


—% 4s modify, re-use or touch up parts at any time. 
By guest artist YAA ob) 


Recycling frames ie) 


1 


Recycling is useful to keep a consistent style and for staying on model. 


AA ARREST 
A ARR EE 


by guest artist Syosa 


ao Once again, the selection tool is your best friend with pixel art. With this tool 
_.-d you can use and COMBINE the following things to help draw new frames: 


i oe a ic 


Copying Resizing Sliding Rotating Cutting Skewing 


By analysing sprite sheets and animations online, you can tell that pixel art has frames that 
recycle a lot of body parts. You can_ tell some modified frames 
There is no need to redraw everything from scratch with pixelart. Once 
you have a solid base pixel drawing, that sprite itself becomes your main 
resource. Duplicating sprites and modifying them will save you time. 


Mighty Switch Force 2 (WiiU/3DS) Metal Slug 3 (NeoGeo, PS2, Various) 


Squashing, stretching or sliding parts around are the basics. Once you get the hang of these techniques, 
you'll be able to combine them. Instead of drawing a new frame, you can obtain really complex frames 
by skewing and rotating. Things will look rough, but that's because you still have to clean the sprite up. 
ay 

=> 


Metal Slug 3 (Arcade, Neo Geo) 


28 Try to figure out how to save yourself some time with some clever recycling. 


Br 
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frame A frame A "transformed" frame B by Michafrar 


HOWEVER the important part is to put enough work into frames by transforming 
U) and frankenstein-ing them in order to make them look distinct from another. 


() You can NOT just slide body parts around and leave it at that. If you don't edit them, 
your characters will look robotic or like "tweened’. 


This method is comparable to the technique of 


"Place and Trace" used in traditional 2D animation*. 


Combine both the silhouette 
and recycling method to create 
rough inbetweens much faster. 
This does require more clean-up 
j Fa but you'll get a feel of the final 
frames “PE fe f pd! re animation a lot sooner. 


Wargroove (PC, PS4, Switch, XBO) 


! feel that with silhouette style animation, the whole thing should move all at once, much 
like the movements of a running horse. Reusing frames is convenient for showing small 
expressions and human gestures. | use both of these two techniques. Syosa/ Lx 


This technique goes hand in hand with the "Recycling frames" method. 
You can combine methods! 
W ith a little experience, it can speed up your work tremendously! 


Place and Trace (also called shift and trace or even lift and trace) is atechnique where traditional 2D animators use a previously drawn frame as a guideline to draw inbetweens 
or new keyframes. This drawing is placed underneath a blank frame so it can be loosely traced or transformed. This technique helps objects, features and characters stay uniform. 229 
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Arcade, SNES 


This refers to the traditional way of animating on paper or softwares 
like Adobe Photoshop, Adobe Flash, TVPaint and Toon Boom Harmony. 


Today, this technique consists of: 
- First, drawing animation in higher definition. 
- Then, shrink the frames down to a pixel-friendly size. 
- Finally, tracing or editing the frames of animation. 


Many refer to Capcom when talking about this technique. 


In the past, 2D Capcom artists would use grid paper to animate 
the characters and then digitize and colour the frames on computers. 
Various studios would make use of this method. Some companies 
would employ the help of external 2D animators; others worked 
in-house. The way each studio digitized their animation frames was 
different, yet the main process remained the same Earthworm Jim P 
sprites were coloured first. By studying many of the scans and beta 
footage, you can tell drawings were altered during the pixel art phase. 


Today, preliminary sketches are all done on computers. 


Here are some tricks to help digitize your work to pixels, no matter the software: 


£ sa _[S—— is 
f Shrinking € Reducing — Up the Sharpen 
i yj i without blur colours 8-3" contrast filter 


Once the images are optimised, it’s all clean-up from there on. After all, pixel art is about having control. 


If you need to create extreme amount of animation, one possibility is 
to create 3D models first. The results created with these models are still 
considered pixelart, as they still require the skill and knowledge of pixel 
art during the clean-up phase. A well-known game with this technique 
is The King of Fighters XI, but you can find it in older games such as Sonic 
2, Mickey Mania and Kirby Super Star. The company Arc System Works use 
3D models to create sprites with games such as One Piece: Great Pirate : 
Colosseum, Dragon Ball Z: Extreme Butoden and the Blazblue series. One Piece: Great Pirate Colosseum (N3DS) 


If you're interested in finding out how to further digitize your work, check 
the wonderful site: 2Dwillneverdie.com that specialises in this method. 


We’ve talked about the traditional method before. Have a look back at these previous pages: 


Introduction ; Readability Clean-up 


So where do | start? p 8-9 From rough to clean p 164 
Symbols | — Hands # 
Oldschool” hardware =p 11 Enea anne ee From start to finish - | p 182 


‘neat fe 


This technique is straightforward: it’s the same as regular digital animation. 
Whether you animate on paper or on computer you'll start with: 


_ lineart —» colours —> shading —» clean-up 


SPORE, 
SPANOR WES 


By guest artist YAA 

Every frame needs to be shaded individually from scratch. This method may look faster at first, but it takes 

quite a long time. It’s pixelart from start to finish. That's what sets it apart from the traditional method. 
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Limited frames 


Two frames are the bare minimum. Unfortunately, we can't have any arcs or ways to 
show how things go from A to B. The animation will just flicker. We can learn from 
this we need at least a third frame, a breakdown to show the direction or arc. 


You need to convey the most amount of motion with lowest amount of drawings. This is the real difficulty. 
These are useful to include to have limited yet pleasing animation, besides basic keyframe poses: 


a strong keyframe of anticipation if possible: a breakdown, a "mid-point" 
an overshoot frame for snappy motions accurate silhouettes that portray the action. 


The following advice is inspired by Mariel Cartwright (@kinucakes) 


— 4) 


eG by Michafrar 


The minimum amount of frames Rather than going back and forth, Overlapping actions can be 
fora convincing loopais3 frames. — you can position objects in a circle narrowed down to 3 frames too 


This minimum even works for run 
animations. You can have a3 frame loop 
where the legs are interchangeable. 


by Michafrar 
Metroid (NES) 


x. x. x. x. You can also have 4 frames where 
| & eC ge e the one of the frames is reused 
(usually a breakdown). This way 
3 : ; : 2 3 


’ the animation can loop back. 


1 
Castlevania Ill Ts Ducktales (NES) 


Even with strict limitations you can get 
very expressive with looping animations! 


Treasure Master(NES) 


Having a bit of trouble with walk cycles? 

Makea character go across the screen ratherthan having them walk 

in place. Keep track of where the foot has contact withthe ground. = 
232 Vnce you're done, reposition your frames back to the middle. e 


The Onion skin 


The Onion skin tool shows you the previous and next frames, 
helping you draw in-betweens - but with pixel art there's a catch. 


a 
a 


Spaced-out frames Frames closer together 


The onion skin tool only works well for Turning on the onion skin becomes a 
line art and to approximate in-betweens. big mess when you have loads of colours. 
Frame A FrameB — Onionskin —_In-between Good luck with that ... 


Bites If you're lucky, your outline can be in-betweened without 
much hassle like this: If you don't use lineart to make 
—_" pixel art animations, so the onion skin isn't always useful. 
You can find an onion skin button in most animation software. Some software may call it a “light table’. 


ee oe 
e Light Table fc eR = 


Pro Motion GraphicsGale Onion Skin Aseprite 


This goes without saying: pay attention to how you use the 
onion skin. Let's subpixel this umbrella shape downwards. 


: This onion skin gives you enough information to draw 
i an in-between. Unfortunately, it’s a misleading shape. 


on con You literally can’t draw between the lines, like with 
traditional animation. There's little to no space to do that. 


The best solution is to favour (to draw closer) the key frame 
fe so that your in-betweens maintain the shape. 538 


Line boiling 


AQOOOO 


Rakugakids (N64) 
Boiling is the wobble effect of hand-drawn lines. This is often a result of frame by frame 
pixel drawings. With so many pixels tightly together, it’s likely that some of them might “jitter’’ 
Boiling is inevitable with traditional art, but can be avoided with digital arts. 


Causes: 
rt oe! 
Msi * 
In-betweens favour the wrong frame. Movement doesn’t follow an Arc Subpixeling (if used) is not aligned well. 
Posibilities: 


- Use the selection tool as much as possible. Slide parts around. 

+ Use Subpixeling to make sure frames transition smoothly with tight in-betweens. 

- Be economical, utilize limited animation. The risk you take, however, is having choppy animation. 
Some artists and audiences find high framerate pixel art to be too sterile, too clean. Find a nice 
balance between old limitations, and modern possibilities. You don’t have to adhere to anything. 


Certain games try to mimic the handdrawn style, games such 
as SMW2: Yoshi's Island (SNES) and Ragukakids (N64). These 
games have intended line boil, they simply mimic the shaky 
animation. However Yoshi's island only uses the technique for 


backgrounds and objects. Character and enemy sprites are SSE? 
one, ibe 


animated without line boil. 


m= {ii Line boil is particularly noticeable when characters are redrawn for 
Pay : every frame even though they are standing still. With traditional art, it’s 

ot often used asa popular stylistic effect. With pixelart, it doesn’t translate 
well because it’s at a low resolution, so there is little room for boiling. 


Sree Serene One odd frame can mess up the animation. 
lineboil cleaned up 
Street Fighter III (Arcade) * This example is strictly animated. Check the appendix to see it. 
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Parallax scrolling 


To add more depths you can either use perspective for the background, or use parallax scrolling: 
dividing your background in layers and moving that at different speeds: 


The closer a piece of landscapeis, the faster it moves. 
The further away it is, the slower it moves. 

Skies or very distant objects like the sun, 

moon, stars, and mountains rarely move. 


The landscape moves like in a car ride! 


There are 3 distinctive types of parallax scrolling that give 3 unique effects. 


Followi ng Travelling 


Revolvi ng 


Alllayers move in the same direction, Layers move in opposite directions The background loops, the front is 
but they move at different speeds. The scene makes the camera turn. frame by frame - the camera revolves 


Rayman (PS1) Ninja Gaiden (NES) Mickey Mania (Megadrive) 


Parallax Scrolling isn’t just for side-scrollers. They can easily be used in top-down views like in 
The ee of Zelda: Minish Cap (GBA). Notice how the blade of grass travels over the leaf. 


i 


pe 


Backgrounds can stretch and skew to 
create perspective. Each pixel scanline 
is moved at different speeds with the 
help of programming code. 


Street Fighter Il Turbo (SNES) 


Focus on the distant background as the character swims up. Notice how the wooden beams move down. 


To achieve this effect, artists created both the floor and 
ceiling of the beams ina single asset. The beam is stretched 
as the character goes up and down, revealing either side. 


Donkey Kong Country 2: Diddy's Kong Quest (SNES) 


If you'd like to know about these coding techniques, watch the videos at Game Hut. 


Jon Burton, director at Traveller's Tales reveals all his programming tricks there. [q il fl ER U 7 


http://www.gamehut.com/ 
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Conclusion 


To some, pixel art is synonymous with animation. To others, it's synonymous with illustrations. 
Whether you animate or not, give this a thought: 


Animating is a transferable skill. 
This means it's an ability that can be applied in other fields. It's a super valuable skill to know if you wish to 
create videos, computer games, or simply want to further your career. You don't have to excel at animation 
per se, but learning it will teach you some cool tricks that you can apply elsewhere! 


Animation is also an expansive subject. 
As much as this chapter can cover the topic, one book simply isnt enough! It's a diverse and complex subject 
with its own methods. To this day, artists continue to write about it, discuss it, and establish new styles. 
Pixel art animation is a sub genre of both art and animation. It requires you to combine your knowledge of 
each, so its valuable for your own artistic growth to learn about the fundamentals of animation as a whole! 


Most importantly, have fun. Animating is hard work, 
but can feel so satisfying when you see things come to life! 


DARKS F.gh3 


Advance Guardian Heroes (GBA) 


~ 
Food for thought Key techniques Animation concepts 
Introduction Squash & Stretch The Four methods 
How to study Anticipation Silhouette animation 
Timelines in pixel art Breakdown Pee heidi 
Ease in and out Simple lineart 
Smears Limited frames 
Overshoots The Onion skin 


Overlap & Follow-through Parallax scrolling © 237 


ue 
Afterword 


Epilog 


After writing this book on-and-off for the past four years, it’s hard to find good closing words. Pixel 
art is a harmony of painted rendering and precise sculpting. The defining feature of this art form is and will 
always be the precision and control you bring to your art pieces. This is what makes it a medium and not a 
style. By now, many of you know this already. 


Knowing how to draw is a requirement. It’s a skill you need to somewhat master before learning new 
ones. In order to run, you need to learn how to walk first; A comes before B. Animators are told that drawing 
is a fundamental skill. Pixel artists need to be told the same. The art of pixels is nothing without a good sense 
of illustration and painting. To be a proficient pixel artist, you need to be good at drawing or painting. Most 
of the time if something doesn't look quite right with your sprites, the cause will most likely be related to 
the drawing. | would have included this paragraph in the very beginning of the book, but I've been told this 
advice can be quite discouraging for newcomers. However, | feel it's a necessary speech to give newcomers, 
despite how harsh it may sound to non-artists who really want to give pixel art a try. Even minimalist styles 
or super low-res sprites will require some understanding of colours and shapes. 


Pixel art finds its roots in video games. As a result, most sprites featured in this guide served as 
reference, study and analysis. | strongly advise you to do the same. In fact, | urge you to study and learn 
from video games and artists who worked for them. It's easy to just browse art online and only come across 
single artist creating gorgeous visuals. But you shouldn't strictly study from her/him alone. These artists 
have their own inspirations. It's worth checking out what taught them pixel art. If you simply study one 
artist's interpretation, you won't understand how they got there. Your work will end up being an imitation 
of an imitation, if that's all you know. You can still have your one favourite artist, but always try to be on the 
look out for more artists and more games. 


Lastly, this book has no exercises, since art is a productive skill. It's hard to evaluate your work without 
a community ora class. If you want to train, it's up to you to find what inspires you and incorporate some new 
elements into your artwork. Anything that hasn't been talked about in this book is specific to other artforms 
(textures, shading) or video game development (tile sets, engine implementation, etc...). It's up to you to 
continue your journey and find more resources and tutorials. 


Stay curious. Once you come across Pixelart you find interesting, save it, and ZOOM IN! 
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Guest Artists 


oe Anubis Jr. 
Twitter: @Anubis_Jr 
Website : anubis-works.tumblr.com 


Glauber Kotaki 


iwitter: @unseven 


Website : glauberkotaki.com 


Paul Veer 


Twitter: @pietepiet 


Website : pietepiet.com 


Dani Oliver 


Twitter: @ahruon 


Website : ahruon.tumblr.com 


Ellian 
Twitter: @ThislsEllian 


Website : thisisellian.com 


Jinn 
Instagram: jinnpixel 
Website : http://jinn.art.br/ 


Justin Cyr 
Twitter: @JUSTIN_CYR 


Website : justinpaulcyr.tumblr.com 


Steven McCarthy 


Twitter: @1988StevenM 


Website : 1988stevenm.carbonmade.com/ 


A big thank you to 
The Spriters Resource 


Temmie Chang 
Twitter: @tuyoki 


Website : temmiechang.tumblr.com 


Jenna Brown 


Twitter: @cyanatar 


Website : cyanatar.com 


Cocefi 
Twitter: @chickysprout 


Website : pixosprout.tumblr.com 


Neorice § 
Twitter: @Neoriceisgood . 


Website : neorice.com 


Syosa 
Twitter: @sy0sa 
Website : collet66.blog52.fc2.com 


Thernz 
Twitter: @thernz 


Website : thernz.tumblr.com 


YAA 


Twitter: y_a_a_m_m_y 


Website : http://yaa-tum.tumblr.com/ 


Shawn Martins £& 
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Twitter: @puppiesandanime 


Website : puppiesandanime.tumblr.com/portfolio 


Www-.spriters-resource.com 


An online archive that catalogues sprites and backgrounds from video games. This website is 
where | started as a young rookie pixel artist. Thank you to Mark Brown (GMT), 
Dazz (Daniel Brown), Shane Gill (DYKG) & everyone who worked on the website! 
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Boktai © Konami; Nox © Westwood Studios, EA Pacific; SimCity (Nintendo) © Maxis, Nintendo, Electronic arts (brand) — Page 153: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory Double Dragon © 
Technos Japan, Arc System Works; Pacman © Bandai Namco — Page 154: Pokémon Black/White, Cynthia, Hilbert © Game Freak, The Pokémon Company, Nintendo; Cyberbots © Capcom; Fatal Fury © SNK 
Corporation — Page 155: Indiana Jones and the Fate of Atlantis © LucasArts; Saga Frontier, Star Ocean, The World Ends With You © Square Enix Co., Ltd.; Contra © Konami — Page 156: The Legend of Zelda: A 
Link Between Worlds, Pokémoon Diamond Version © Nintendo — Page 157: Chrono Trigger © Square Enix Co., Ltd. — Page 159: Samus Aran, Kreid, Metroid, The Legend of Zelda: the Minish Cap, Super Mario 
World 2: Yoshi's Island © Nintendo 

Chapter 7 — Page 161: Dudley, Street Fighter © Capcom ; Pokémon Black2 & White2 Version © Game Freak, The Pokémon Company, Nintendo ; Rosalina, Super Mario © Nintendo— Page 164-165: Jojo's 
Bizarre Adventure © Hirohiko Araki, Shueisha Inc., Capcom ; Zangief, Dudley, Street Fighter © Capcom— Page 166: Zero, X, Megaman X © Capcom; Sonic The Hedgehog © Sega— Page 167: Fire Emblem © 
Intelligent Systems, Nintendo ; Drawn to Life © THO, 505 Games— Page 168: Pokémon Platinum Version, Charmeleon, Pikachu © Game Freak, The Pokémon Company, Nintendo— Page 169: Knuckles The 
Echidna © Sega ; Pulseman © Game Freak, Sega— Page 170: Puyo Puyo, Puyo pop © Sega; Metal Gear Solid 3: Subsistence © Konami— Page 172: Lemmings © Rockstar North Ltd.; Castlevania © Konami 

; Shin Megami Tensei © Atlus Co., Ltd.— Page 173: Odin’s Sphere © Vanillaware, Atlus ; Mother 3 © Shigesato Itoi, HAL Laboratory, Nintendo; Alundra © Matrix Software, Sony Interactive Entertainment 
Inc.— Page 175-176: Captain Toad © Nintendo — Page 177: Pokémon HeartGold & Soul Silver version © Game Freak, The Pokémon Company, Nintendo— Page 180: Jackie Chan's action Kung Fu © Hudson 
Soft, Konami — Page 186: Drawn to Life © THQ, 505 Games 

Chapter 8 — Page 187-188: Metal Slug © SNK Corporation ; Super Metroid, Samus Aran © Nintendo; Darkstalkers © Capcom; Toad © Nintendo — Page 189-190: Iconoclasts © Joakim Sandberg; Metal Slug 
Attack © SNK Corporation; The Legend of Zelda: The Minish cap © Nintendo, Capcom; Sonic Mania © Sega— Page 193: Mario & Luigi: Superstar Saga © Nintendo, Alphadream; Braixen, Pokémon © Game 
Freak, The Pokémon Company, Nintendo; Metal Slug © SNK Corporation— Page 195: Tingle, The Legend of Zelda © Nintendo; Chikorita, Pokémon © Game Freak, The Pokémon Company, Nintendo — Page 
196: The Legend of Zelda: A Link to the Past © Nintendo — Page 197: Darkstalkers © Capcom; Klonoa © Bandai Namco — Page 198: Iconoclasts © Joakim Sandberg; The Legend of Zelda: The Minish cap 

© Nintendo, — Page 199: Pikachu, Pokémon © Game Freak, The Pokémon Company, Nintendo — Page 200: Red Earth © Capcom — Page 201-203: King of Fighters, Metal Slug © SNK Corporation ; Alien 
Infestation © Sega ; Iconoclasts © Joakim Sandberg — Page 204: Darkstalkers © Capcom; Jojo's Bizarre Adventure © Hirohiko Araki, Shueisha Inc. — Page 205: Owlboy © D-pad Studios; Metal Slug © 

SNK Corporation; Tingle © Nintendo; Iconoclasts © Joakim Sandberg; Scot Pilgrim © Bryan Lee O'Malley; Zero, X, Mega man © Capcom — Page 206: Aladdin © Virgin Entertainement, Disney Interactive ; 
Wargroove © Chucklefish Ltd.; Sonic The Hedgehog © Sega — Page 207: Diddy Kong © Nintendo; Street Fighter (Alex) © Capcom — Page 208: Samus Aran, Metroid © Nintendo; Mighty Switch Force © 
Wayforward Technologies; Iconoclasts © Joakim Sandberg — Page 209-210: Owlboy © D-pad Studios — Page 211: Fire Emblem © Intelligent Systems, Nintendo; Wargroove © Chucklefish Ltd.; Metal Slug © 
SNK Corporation 

Chapter 9 — Page 213: Castlevania, Richter Belmont © Konami — Page 215: Fire Emblem © Intelligent Systems, Nintendo;— Page 216: Super Mario, Super Mario Bros. 3 © Nintendo 

— Page 218-219: Darkstalkers © Capcom ; Kirby Mass Attack © HAL Laboratory, Nintendo; Phantasy Star © Sega, Ace Attorney © Capcom ; Castlevania, Richter Belmont, Alucard © Konami; Metal Slug © 
SNK Corporation — Page 220: Street Fighter, Makoto © Capcom ; Iconoclasts © Joakim Sandberg — Page 221: Metal Slug Attack © SNK Corporation; Red Earth © Capcom; Knuckles the Echidna © Sega, Sonic 
Team — Page 222: Owlboy © D-pad Studios; Street Fighter © Capcom ; Martial Masters © Andamiro Entertainment, International Games System Co., Ltd. ; Fire Emblem © Intelligent Systems, Nintendo; Icon- 
oclasts © Joakim Sandberg ; Boogerman © Interplay Entertainment Corp; Mario & Luigi: Superstar Saga © Nintendo, Alphadream ; Dragon Force © Sega, J-Force; The Mask © Black Pearl Software — Page 
223: Street Fighter, Karin, Hsien Ko, Darkstalkers © Capcom ; The Hulk, Mickey Mouse © Marvel, The Walt Disney Company; Wild Woody © Sega — Page 224-225: Owlboy © D-pad Studios; Metal Slug Attack 
© SNK Corporation; Martial Masters © Andamiro Entertainment, International Games System Co., Ltd. ; Freedom Planet © GalaxyTrail; Mighty Switch Force © Wayforward Technologies; — Page 226: Zero, X, 
Mega Man © Capcom; Batman NES © Sunsoft Corporation, Detective Comics; Metal Slug Attack © SNK Corporation; — Page 228: Mighty Switch Force © Wayforward Technologies; Metal Slug Attack © SNK 
Corporation — Page 229: Wargroove © Chucklefish Ltd. — Page 230: Darkstalkers, Captain Commando, Street Fighter, Felicia, Chun-li, Ryu, Babyhead © Capcom ; Earthworm Jim © Doug TenNapel — Page 
231: One Piece: Great Pirate Colloseum © Eiichiro Oda, Bandai Namco, Arc System Works — Page 232: Metroid, Samus Aran © Nintendo; Simon Belmont, Castlevania © Konami; Ducktales NES © Capcom, The 
Walt Disney Company; Treasure Master © ASC Games — Page 233: Metal Slug © SNK Corporation — Page 234: Rakugakids © Konami; Super Mario World 2: Yoshi's Island © Nintendo; Street Fighter, Chun-li © 
Capcom — Page 235: Rayman © Ubisoft Entertainment SA; Ninja Gaiden © Tecmo Co., Ltd.; Mickey Mania © The Walt Disney Company — Page 236: The Legend of Zelda: The Minish Cap, Donkey Kong Country 
2 © Nintendo ; Street Fighter Il © Capcom — Page 236: Advance Guardian Heroes © Treasure, Ubisoft 


Software (logo, mascots & screenshots) 
Graphicsgale © Human Balance — Microsoft Paint XP, Microsoft Paint Vista © Microsoft - Aseprite © David Capello — Pro Motion © Cosmigo- “X-1 > KY —)LSAI, Easy Paint Tool 
SAI © SYSTEMAX Software Development — GIMP, GNU Image Manipulation Program © The GIMP Development Team — Adobe Photoshop CS6, Adobe Flash © Adobe Systems 
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Oh no! You've reached the end... 


PIXEL @ LOGIC 


Thank you for reading. 


This marks the end of Pixel-Logic. Any future updates will feature minor changes. 
If you would like to stay updated on what happens next, visit pixellogicbook.com. 
If you have any more questions leave me an email at pixel.logic@outlook.com 
Thanks for your patience and support. Now...time to get creative with pixels! 


